CSS селекторы и комбинирующие символы

Существует более 80 селекторов и комбинирующих символов. CSS селекторы можно сгруппировать по категориям в зависимости от типа элементов, которые они могут выбрать.

Селектор типа выбирает все элементы, имеющие данное имя узла. Например, div выберет все <div> элементы, а input — любой элемент <input>. Универсальный селектор, обозначаемый звездочкой (*), является специальным селектором типа, который выбирает все элементы.

Селектор класса выбирает все элементы, имеющие данный атрибут class , обозначенный именем класса, предваряемый точкой (.). Например, .index сопоставит любой элемент, имеющий class="index". Селектор ID выбирает элемент на основе значения его атрибута id. Селектор обозначается id и предваряется знаком решетки (U+0023, #). Например, #toc сопоставит элемент, имеющий id="toc". И class, и id являются глобальными атрибутами. В документе должен быть только один элемент с данным id; но если их больше одного, селектор ID будет соответствовать всем элементам с этим id.

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

CSS

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

* {
  font-style: italic;
}
p {
  color: red;
}
.myClass {
  text-decoration: underline;
}
#myId {
  font-family: monospace;
}
p.myClass#myId {
  font-size: 1.5rem;
}

HTML

<p class="myClass" id="myId">I match everything.</p>
<p>I match the universal and type selectors only.</p>

Результат

Используя комбинирующие символы CSS, мы можем объединять селекторы для выбора узлов DOM на основе их отношения к другим элементам в дереве узлов документа. Это объединение селекторов с комбинирующими символами создаёт сложные селекторы.

Комбинирующий символ потомка, обозначаемый одним или несколькими пробелами, выбирает узлы, являющиеся потомками первого элемента. Например, div span сопоставит все <span> элементы, которые находятся внутри <div> элемента.

Комбинирующий символ потомка более специфичен, чем комбинирующий символ потомка. Обозначаемый знаком больше чем (>), комбинирующий символ потомка выбирает узлы, которые являются непосредственными потомками первого элемента. Сравнивая с нашим предыдущим примером, div > span сопоставит только <span> элементы, которые являются непосредственными потомками <div> элемента.

Помимо селекторов потомков, CSS также позволяет выбирать элементы на основе их сиблингов. Комбинатор последующих сиблингов, обозначаемый тильдой (~), выбирает сиблинги. Учитывая A ~ B, все элементы, соответствующие B, будут выбраны, если они предшествуют A, при условии, что оба A и B имеют одного родителя. Например, h2 ~ p будет соответствовать всем элементам <p>, которые следуют за элементом h2, непосредственно или нет.

Комбинатор следующих сиблингов, обозначаемый знаком плюс (+), похож на комбинатор последующих сиблингов. Однако, учитывая A + B, он соответствует только B, если B непосредственно предшествует A, и оба имеют одного родителя. Исправляя наш предыдущий пример, h2 + p будет соответствовать только одному элементу <p>, который непосредственно следует за элементом <h2>.

Также существует комбинатор столбцов, обозначаемый двумя символами вертикальной черты (||), который при поддержке выбирает узлы, принадлежащие к столбцу. Например, col || td будет соответствовать всем элементам <td>, которые входят в область действия элемента <col>.

Разделитель пространств имен — это другой комбинатор, который обычно используется в сочетании со @namespace директивой. Этот комбинатор обозначается одним символом вертикальной черты (|). Он позволяет ограничить селекторы типов и универсальный селектор определённым пространством имён. Например, определив пространство имен, такое как @namespace SVG url('http://www.w3.org/2000/svg');, вы можете включить селекторы, которые нацелены только на элементы, вложенные в пространство имён SVG. Объявление SVG|a будет соответствовать ссылкам внутри SVG, а не тем, что в остальной части документа. Пространства имён могут быть полезны для выбора MathML, SVG или другого контента, основанного на XML, внутри вашего HTML.

CSS

В этом примере мы объявляем пять относительных селекторов с использованием простых селекторов в сочетании с комбинаторами.

h2 + p ~ p {
  font-style: italic;
}
h2 + p + p {
  color: red;
}
.myClass + p {
  text-decoration: underline;
}
#myId > .myClass {
  outline: 3px dashed red;
}
* > p {
  font-size: 1.1rem;
}

HTML

<h2 class="myClass" id="myId">
  No selectors match. <span class="myClass">This span has an outline</span> as
  it is both myClass and a child of #myId.
</h2>
<p>The first paragraph is underlined. All the paragraphs are 1.1rem.</p>
<p>
  The second paragraph is red. This and the following paragraphs are italic.
</p>
<p>The third paragraph is NOT red. It is italic and 1.1rem.</p>
<p class="myClass">
  Does not have an outline; this is a sibling of H2, not a child. It is italic
  and 1.1rem.
</p>

Результат

Вышеуказанные сложные селекторы также можно определить с использованием простых селекторов, комбинаторов и вложенности CSS с & селектором вложенности или без него.

CSS

В этом примере мы повторяем те же пять относительных селекторов с использованием простых селекторов в сочетании с комбинаторами, но на этот раз с вложенностью CSS.

h2 {
  & + p {
    & ~ p {
      font-style: italic;
    }
    & + p {
      color: red;
    }
  }
}
.myClass {
  & + p {
    text-decoration: underline;
  }
}
#myId {
  & > .myClass {
    outline: 3px dashed red;
  }
}
* {
  & > p {
    font-size: 1.1rem;
  }
}

HTML

<h2 class="myClass" id="myId">
  No selectors match. <span class="myClass">This span has an outline</span> as
  it is both myClass and a child of #myId.
</h2>
<p>The first paragraph is underlined. All the paragraphs are 1.1rem.</p>
<p>
  The second paragraph is red. This and the following paragraphs are italic.
</p>
<p>The third paragraph is NOT red. It is italic and 1.1rem.</p>
<p class="myClass">
  Does not have an outline; this is a sibling of H2, not a child. It is italic
  and 1.1rem.
</p>

Результат

Селекторы атрибутов выбирают все элементы, которые, в зависимости от написания селектора, либо имеют указанный атрибут, либо имеют значение атрибута с соответствием по подстроке. Например, [type] соответствует всем элементам, у которых задан атрибут type (любое значение), а [type="submit"] соответствует <input type="submit"> и <button type="submit">, или любому элементу с type="submit" заданным, даже если эта пара «атрибут-значение» поддерживается только для элементов <input> и <button>. Сопоставление нечувствительно к регистру.

Чувствительность к регистру атрибута зависит от языка. Как правило, в HTML, если атрибут перечисляемый, значение в селекторе нечувствительно к регистру, даже если это значение не входит в перечень допустимых значений или если атрибут не является допустимым для элемента, к которому он применён. Для неперечисляемых атрибутов, таких как class, id, или любой data-* атрибут, или для не-HTML атрибутов, таких как role или aria-* атрибуты, соответствие по значению чувствительно к регистру; соответствие можно сделать нечувствительным к регистру с помощью модификатора, нечувствительного к регистру (i).

Модуль CSS селекторов определяет более 60 псевдоклассов. Псевдоклассы являются простыми селекторами, префикс которых — двоеточие (:), которые позволяют выбирать элементы на основе информации о состоянии, которая не содержится в дереве документа. pseudo-classes могут использоваться для стилизации элемента на основе его состояния. Например, простой селектор :target выбирает элемент URL, содержащий идентификатор фрагмента, а a:visited составной селектор соответствует всем элементам <a>, которые были посещены пользователем.

Псевдоклассы можно разделить на состояние отображения элемента, ввод, лингвистические, положение, состояние ресурса, временные, структурные (по дереву), действия пользователя и функциональные.

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

Не все CSS селекторы определены в модуле CSS селекторов. CSS псевдоэлементы определены в модуле CSS псевдоэлементов.

CSS псевдоэлементы, имеющие префикс из двух двоеточий (::), представляют сущности, которые не включены в HTML. Например, простой селектор ::marker выбирает маркеры пунктов списка, а составной селектор p::first-line соответствует первой строке всех элементов <p>.

• Список селекторов
• Структура CSS селекторов
• Специфичность
• Модуль вложенности CSS