Структура селектора CSS

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

#myId {
}

[pattern*="\d"] {
}

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

a#selected {
}

[type="checkbox"]:checked:focus {
}

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

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

Сложный селектор представляет собой набор одновременных условий для набора элементов.

a#selected > .icon {
}

.box h2 + p {
}

Селекторы можно читать справа налево. Например, a#selected > .icon соответствует всем элементам с классом icon, которые являются непосредственными потомками элемента <a> с идентификатором selected. Селектор .box h2 + p соответствует первому <p> , который сразу следует после любого элемента <h2>, являющегося потомком любого элемента с классом box.

Список селекторов — это список простых, составных и/или сложных селекторов, разделённых запятыми. Считается, что данный элемент соответствует списку селекторов, если он соответствует любому (по крайней мере одному) селектору в этом списке.

#main,
article.heading {
}

Если какой-либо селектор в списке неустойчивых селекторов недействителен, весь список селекторов считается недействительным.

#main,
:bad-pseudoclass,
.validClass {
  /* `:bad-pseudoclass` is invalid, invalidating this style block */
}

Псевдоклассы :is() и :where() могут использоваться для построения устойчивых списков селекторов.

Относительный селектор — это селектор, представляющий элемент относительно одного или нескольких элементов-якорей, предшествующих комбинатору. Относительные селекторы, не начинающиеся с явного комбинатора, имеют неявный комбинатор потомка.

Относительные селекторы не могут использоваться в списке селекторов. Вместо этого они принимаются в определённых контекстах, таких как псевдокласс :has().

:has(+ div#topic > #reference) {
}

:has(> .icon) {
}

dt:has(+ img) ~ dd {
}

• CSS селекторы и комбинаторы
• Устойчивый список селекторов
• Document.querySelector()
• Document.querySelectorAll()
• Модуль CSS селекторы
• Модуль CSS псевдоэлементы