Селекторы CSS. Дочерние, родственные, селекторы атрибутов, псевдоклассы и псевдоэлементы

К простым, или основным в плане их используемости селекторам можно отнести селектор класса и id.  То есть ваши элементы браузером легко находятся и легко стилизуются. Однако далеко не всегда этого достаточно.

Что, если вам необходимо стилизовать столбцы таблицы?  Поменять цвет у разных блоков с одним и тем же классом? Стилизовать элементы, не имеющих дочерних элементов или, наоборот, имеющих  вполне определённые теги внутри?

Для этого существует масса селекторов,  о которых мы здесь поговорим. В этой статье нам нужно будет разобраться с:

• дочерними селекторами
• соседними селекторами
• родственными селекторами
• селекторами атрибутов
• cелекторами псевдоклассов
• селекторами псевдоэлементов

Дочерние селекторы

Селекторы читаются справа налево, т.е. правила будут назначены для последнего элемента в цепочке.

Контекстный селектор (селектор потомка)

Контекстный селектор  - это селектор типа родитель → вложенный элемент, которые предполагают, что правила, описанные в них, будут работать только в такой связке. Т.е. фактически это выборка потомков элемента? причем абсолютно неважно, насколько глубоко вложен дочерний элемент в родительский.

Контекстный селектор parent child: .menu a, footer li, .navbar li .nav-item. Если цепочка состоит из более, чем 2-х селекторов, то правила применятся только, если у вас в разметке есть все указанный элементы.

В этих примерах форматирование назначено для элементов <li> внутри <ul>, но оно не будет работать для  <li> внутри <ol>. Тут вы должны понимать, что такое форматирование сработает и для основного, и для вложенного списка <ul>, сколько бы их не было.

Второй селектор говорит о том, что мы назначаем свойство display: block для ссылки внутри элемента с классом .menu. При этом неважно, насколько глубоко вложен тег <a> в элемент с классом .menu.

See the Pen Context selector by Elen (@ambassador)on CodePen.

В этом примере вы можете увидеть, как свойства для ul li применяются только для нумерованных списков, а свойства  для  .menu → a работают и в случае с div.menu → lа, и в случае ul.menu → li → a, но в последнем мы видим смещение блока ссылок вправо за счет того, что в списках по умолчанию задан padding-left: 40px.

Дочерний селектор

Дочерний селектор, в отличие от контекстного, не распространяется на произвольную глубину вложенности. Он регламентирует правила только для тех элементов, которые вложены в указанный. В нем используется знак  > для определения селектора, который и является дочерним.

В примере ниже селектор #wrap > div управляет только теми div-ами, которые вложены непосредственно в div#wrap, но на более глубоко вложенные div эти свойства не действуют. А вот селектор .row div уже сработал как для div.col, так и для вложенного в него div. Попробуйте на вкладке CSS для .row div поставить знак > между селекторами (.row > div) - и посмотрите, что будет.

See the Pen context selector & child by Elen (@ambassador) on CodePen.

Селекторы одного уровня вложенности

Соседний селектор

Соседний селектор позволяет указать на элемент, который находится рядом с текущим на том же уровне вложенности, например,  h2 + p укажет на абзац, идущий сразу за заголовком <h2>.

Пример вживую:

See the Pen Next-sibling combinator by Elen (@ambassador) on CodePen.

К соседним селекторам можно отнести также .logo + ul, .label + input[type="text"] , li:first-of-type + li и т.д.

Родственный селектор

Родственный селектор похож на соседний, но, в отличие от соседнего элементы находятся на одном и том же уровне вложенности, но не обязательно располагаются друг за другом.

Вид селектора: elemA ~ elemB — правила записываются для elemB. При этом оба элемента имеют общего родителя и все элементы типа elemB находятся после элемента типа elemA в HTML.

В предыдущем примере вы найдете, что все абзацы, а не только первый, которые идут после заголовка 3-го уровня, имеют другой цвет и курсивное начертание.

Селекторы атрибутов

Атрибуты - это своего рода "расширения" для тегов. Т.е. это некие свойства, без которых часть элементов могут отлично существовать (например, универсальные атрибуты title, style, id), или обязательные атрибуты, как src и alt для тега <img> или  href для <a>. Селекторы атрибутов записываются в квадратных скобках и имеют довольно много вариантов:

• [title] {color: red} - указываем только атрибут, без значения - для всех элементов, у которых есть такой атрибут
• a[target] {border-bottom: 1px dotted #900} - для конкретных тегов, у которых есть такой атрибут (пример с аккордеоном).
• input[type="password"] {} - тег с атрибутом, имеющим конкретное значение
• [class^="col-"] {width: 30$%} - для элемента с атрибутом class="col-"(варианты: "col-1", "col-md-4", "col-inner-block")
• [class*="item"] {display: inline-block} - атрибут class содержит слово "item" в любом месте (варианты: item-block или pic-item)
• [class$="item"] -  атрибут class содержит слово "item" в конце (т.е. "block-item", "icon-item", "menuitem")
• input[type="text"][required] - элемент с 2-мя атрибутами

В примере ниже вы найдете варианты использования селекторов атрибутов, перечисленные выше.

See the Pen Attributes selector by Elen (@ambassador) on CodePen.

Селекторы псевдоклассов

Псевдоклассов на самом деле очень много. Селектор псевдокласса начинается с двоеточия и чаще всего указывается после элемента или класса. Например:

Все селекторы псевдоклассов условно можно разделить на подгруппы:

• псевдоклассы, определяющие состояние элементов, в том числе ссылок;
• псевдоклассы для элементов форм:
• псевдоклассы, имеющие отношение к дереву элементов страницы;
• псевдоклассы, указывающие язык текста.

К группе, определяющей состояние элементов, относятся такие псевдоклассы, как:

1. :hover - применяется при наведении на ссылку или на любой другой элемент страницы
2. :active - применяется к активным ссылкам, т.е., когда на ссылку нажали, но пока не отпустили курсор
3. :link - применяется к непосещенным ссылкам
4. :visited - применяется к посещенным ссылкам
5. :target - представляет уникальный целевой  элемент с подходящим id URL-фрагментом.

Пример использования псевдокласса :hover.

See the Pen Glowing Icon Hover Effect by Diego Lopes (@dig-lopes) on CodePen.

Пример псевдокласса :hover + использование родственного селектора типа .tooltip:hover ~ .popup-bg для отображения всплывающей подсказки. Для ее появления наведите курсор на знак вопроса.

See the Pen Emerging Tooltip by Mikael Ainalem (@ainalem) on CodePen.

Псевдоклассы для элементов форм:

1. :focus - применяется к элементу при получении им фокуса
2. :checked - применяется к таким элементам форм, как переключатели (radio), флажки (checkbox) и пункты списка (option), когда они находятся в положение checked или selected. Этот псевдокласс, например, позволяет управлять переключателями, создавая переходы между слайдами.
3. :required - находит любые  элементы типа <input>, имеющие атрибут required и позволяет показывать пользователям, что поля должны быть корректно заполнены перед отправкой формы.
4. :valid - находит любые элементы типа <input> или <form> , контент которых валиден  в соответствии с типом поля. Позволяет менять внешний вид полей при правильном вводе данных.
5. :invalid - находит любые элементы типа <input> или <form> , контент которых невалиден  в соответствии с типом поля. Позволяет менять внешний вид полей при неверном вводе данных.
6. :in-range находит элементы (<input type="range|number">), значение которых соответствует указанному для них диапазону ограничений. Он позволяет странице показывать, когда значение элемента находится в допустимом диапазоне.

Примеры использования псевдоклассов для элементов форм вы найдете в отдельной статье.

Группа псевдоклассов, имеющих отношение к дереву элементов страницы

Самая многочисленная группа псевдоэлементов:

1. :first-child - первый дочерний элемент;
2. :last-child - последний дочерний элемент;
3. :only-child - единственный элемент у своего родителя;
4. :nth-child(n) - n-ый элемент у своего родителя;
5. :nth-child(even) - четный элемент у своего родителя;
6. :nth-child(odd) - нечетный элемент у своего родителя;
7. :first-of-type - первый элемент определенного типа;
8. :last-of-type - последний элемент определенного типа  (подробнее в статье);
9. :only-type - единственный элемент определенного типа;
10. :empty - выбирает элементы, не имеющим дочерних элементов, включая текстовые узлы или любые теги;
11. :is(header, main, footer) - проверяет, является ли селектор указанным в скобках типом, классом и т.п. (подробнее в статье);
12. :where(header, main, footer) - проверяет, является ли селектор указанным в скобках типом, классом и т.п.
13. :not(header, main, footer) - проверяет,  что селектор не является указанным в скобках типом, классом и т.п. (подробнее в статье);
14. :has(.card-image) - селектор, имеющий внутри дочерний элемент указанного в скобках типа.

Выбор языка

:lang(en) - определяет язык, который используется на html-странице или в ее фрагменте.

В скобках вы должны указать нужный вам язык. Хорошо работает на мультиязычных сайтах, например для указания стилей при использовании плагина Polylang для WordPress.

Селекторы псевдоклассов можно сочетать:

В примере ниже вы найдете стили для псевдоклассов :nth-child, :first-child, :last-child, :checked, которые применяются к мобильному меню:

See the Pen Untitled by Elen (@ambassador) on CodePen.

Там же есть использование родственного селектора.

Селекторы псевдоэлементов

Псевдоэлемент — это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть выбранного элемента.

Псевдоэлемент позволяют управлять внешним видом не только самих элементов, но и выделением текста, например. Селектор псевдоэлемента начинается с двойного двоеточия.

Виды селекторов псевдоэлементов:

1. ::selection - управляет стилями выделенного текста;
2. ::placeholder - внешний вид атрибута placeholder в текстовых полях;
3. ::after - добавляет контент перед закрывающим тегом;
4. ::before - добавляет контент после открывающего тега;
5. ::backdrop это прямоугольник с размерами окна, который создается сразу же после отрисовки любого элемента в полноэкранном режиме. Это включает элементы, установленные в полноэкранный режим с помощью Fullscreen API и элементы <dialog>.
6. ::first-letter - стили для первой буквы в элементе;
7. ::first-line - стили для первой строки в элементе;
8. ::marker  - стили для маркеров списков.

Использование псевдоэлемента ::selection и псевдокласса :focus.

See the Pen Snake highlight by Mikael Ainalem (@ainalem) on CodePen.

Описание селекторов псевдоэлементов с примерами вы найдете в отдельной статье. Кроме того, при стилизации любых элементов стоит также учитывать приоритет селекторов.

Проверка понимания селекторов

Пройдите тест от Paulina Hetman: ответьте на 25 вопросов на понимание CSS-селекторов и узнайте свой результат.

See the Pen QUIZ: Well aimed? How well do you know CSS selectors? by Paulina Hetman (@pehaa) on CodePen.