Селекторы CSS: выбор элементов
Как выбирать теги, классы и дочерние элементы, не привязывая стили ко всей структуре страницы.
Как это работает
Селектор определяет, к каким элементам применяется правило. Имя тега выбирает все такие элементы, точка обозначает класс, решётка — id. Комбинаторы уточняют отношения: пробел означает потомка, а знак > — только непосредственного ребёнка.
Для компонентов удобно использовать короткие классы с понятной ролью. Длинная цепочка вроде .page .main div ul li a зависит от множества деталей разметки. Перенос компонента в другую область может сломать оформление, хотя сам элемент не изменился.
Пример в интерфейсе
.card > p { color: #11694e; }
.card { padding: 18px; background: #eef4f0; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| .card | Элементы с классом card. |
| .card > p | Только прямые дочерние абзацы. |
| .card p | Все абзацы внутри, включая вложенные. |
| [type="email"] | Выбор по значению атрибута. |
На что обратить внимание
Не путайте .card.active с .card .active. Первая запись требует два класса у одного элемента, вторая ищет потомка.
Проверьте на практике
Добавьте вложенный блок с абзацем и сравните .card > p с .card p. Цвет должен показать различие между прямым ребёнком и любым потомком.
Связанные темы: specificity, color.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.