Селекторы, псевдоклассы и псевдоэлементы
↑ 1.3 CSS и SASS · ← Предыдущая · → Следующая
Зачем это на собесе
Знание селекторов влияет на специфичность и качество CSS; спрашивают
:is,:where,:has.
Объяснение
| Селектор | Пример | Смысл |
|---|---|---|
| Тип, класс, id | div, .card, #app | по тегу, классу, идентификатору |
| Атрибут | [type="text"], [href^="https"], [data-x~="a"] | по атрибуту (^= начало, $= конец, *= содержит) |
| Потомок / дочерний | a b, a > b | любой уровень / прямой потомок |
| Соседи | a + b, a ~ b | следующий / все следующие |
| Группа | h1, h2 | несколько |
| Универсальный | * | все |
Псевдоклассы (состояние):
:hover, :focus, :focus-visible, :active, :disabled, :checked, :first-child, :last-child, :nth-child(2n+1), :not(.x), :is(h1, h2), :where() (нулевая специфичность), :has(> img) (родитель по потомку), :empty, :root, :valid/:invalid.
Псевдоэлементы (часть элемента): ::before, ::after (с content), ::first-line, ::first-letter, ::placeholder, ::selection, ::marker.
.btn:not(:disabled):hover { background: var(--accent); }
.card:has(img) { display: grid; }
li:nth-child(odd) { background: #f5f5f5; }
.tag::before { content: "#"; opacity: .6; }Синтаксис одним двоеточием — псевдокласс, двумя — псевдоэлемент (::before).
Нюансы и подводные камни
:nth-childсчитает по всем сиблингам,:nth-of-type— по типу.::before/::afterне отображаются безcontentи не для замещаемых элементов (img).- Селектор
:has()— мощный, но следите за производительностью на больших деревьях. - Слишком длинные селекторы связывают CSS со структурой DOM.
:focusпротив:focus-visible: последний показывает фокус только при клавиатурной навигации.
Практика
- Оформите таблицу «зебра» через
:nth-child. - Реализуйте иконку через
::beforeбез лишней разметки. - Выделите карточки с изображением через
:has().
Вопросы с ответами
Чем псевдокласс отличается от псевдоэлемента?
Псевдокласс выбирает элемент в определённом состоянии, псевдоэлемент — его часть или генерируемый контент.
Что делает
:where()?Как
:is(), но с нулевой специфичностью.