HTML\CSS → Виды CSS селекторов

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

1. Селекторы по тэгам: h1

2. Селектор по id: #main

3. Селекторы по классам: .hidden

4. Селектор по нескольким классам

Записываются слитно без пробелов. Селекторы удовлетворяющие одновременно сразу нескольким условиям (логическое “И”). Стили будут применяться ко всем элементам, которые одновременно имеют и класс .hidden и класс .closed.

.hidden.closed

5. Контекстные селекторы

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

p strong
ul .selected
.header .menu a

Например, селектор .menu a сработает для ссылки a только в том случае, если она расположена внутри элемента с классом .menu.

6. Соседние селекторы

Выделяет последующий элемент. Записываются с помощью знака +. Читается как: применить свойства к селектор2 который должен быть сразу после селектор1.

Стили применяются к элементу, подходящему под селектор2, только если перед ним расположен элемент, подходящий подселектор1.

<li class="green"></li>
<li class="selected"></li>
...
.green + .selected {}

В примере .green + .selected применит стили ко второму элементу, т.к. перед ним есть элемент с классом .green. Селектор.green + li тоже применит стили ко второму элементу, а селектор .selected + .green не сработает.

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

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

<ul><li>item</li></ul>
<p>Selected</p>
<p>Selected</p>
<p>Selected too</p>
<span>Not selected</span>
...
ul ~ p {}

В данном примере будут выбраны все элементы p, идущие за ul. В то время, как при использовании селектора ul + p будет выбран только первый элемент.

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

Записываются с помощью знака > и распространяются только на элементы первого уровня вложенности. На элементы вложенные в другие элементы не распространяются.

ul > li {}

В случае контекстных селекторов они влияют на всех потомков (например если задать ul li) что не всегда удобно. Дочерние селекторы позволяют задать стили только для элементов первого уровня вложенности.

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

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

Чаще всего используются при работе с формами. Селекторы атрибутов записываются с использованием квадратных скобокэлемент[атрибут].

Примеры селекторов атрибутов:

input[type="text"]
input[checked]
div[data-type="image"]
a[href*=".com"]
a[href^="http"]
a[href$=".jpg"]
a[data-info~="bar"]