Css-селекторы

16/11/2013

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

Спецификацию можно найти тут: w3.org/TR/css3-selectors.

Селекторы делятся на несколько видов:

по типу (H1, TD, HR...);
универсальный селектор — * — обозначает элемент любого типа;
селекторы атрибутов ([data-name], [data-name$="hidden"]);
селекторы по классу (.main, .header__nav);
селекторы по ID (#form, #submit);
псевдо-классы:
- динамические (:hover и т.д.);
- селектор цели (:target);
- селектор по языку (:lang(en));
- состояния элементов интерфейса (:enabled, :checked...);
- структурные псевдоклассы (:root, :nth-child);
- псевдокласс отрицания (:not(P)).
псевдоэлементы (:before, :first-line);
комбинаторы (DIV SPAN, P + H1);

Селекторы ниже сгруппированы по спецификациям. Это поможет нам понять какие из них работают везде (из CSS1), какие работают почти везде (из CSS2), а какие кое-где могут и не работать.

Селекторы из CSS1

Самые простые и хорошо всем знакомые:

обращение к элементу по тегу (BODY, A, TABLE и т.д.);
по ID (#main);
по классу (.header-image);
обращение к потомку через родителя (UL A, .sidebar .widget);
состояния ссылок A:link, A:visited, A:hover;
псевдоэлемент для первой строки текста — P::first-line;
псевдоэлемент для первого символа в тексте — P::first-letter.

Не густо : )

Селекторы из CSS2

В этой спецификации добавилось много интересного:

* — универсальный селектор. Например, * {margin: 0; } уберет отступы у всех элементов на странице.
E[foo] — элементы с заданым атрибутом.

Например, код:
```
P[data-content] {
  border: 2px solid crimson;
}
```
выберет только абзацы, у которых есть атрибут data-content:
E[foo="bar"] — элементы, у которых атрибут имеет заданное значение.
```
P[data-content="hello"] {
  border: 2px solid orange;
}
```
E[foo~="bar"] — элемент, который имеет атрибут со списком значений, разделенных пробелом, одно из которых равно заданному.
```
P[data-content~="hello"] {
  border: 2px solid yellowgreen;
}
```
E[foo|="bar"] — элемент, который имеет атрибут со списком значений, разделенных дефисом, который начинается с заданного.
```
P[data-content|="hello"] {
  border: 2px solid steelblue;
}
```
E:first-child — псевдокласс, обращающийся к первому элементу из нескольких внутри родителя.
```
P:first-child {
  background: gold;
}
```
Селектор выбирает первый элемент только если он соответствует заданному тегу или классу и только если он является самым первым потомком родителя.

Для выбора первого элемента из списка дочерних элементов определенного типа существует другой селектор — :first-of-type, добавленный в CSS3.
E:lang(fr) — выбирает элементы на заданном языке. Язык элемента может быть получен из HTTP-заголовков, отдаваемых сервером, из meta-тега, заданного в head, либо если у элемента задан атрибут lang

Например, этот код добавит малиновый фон всем элементам, для которых язык определен как русский:
```
P:lang(ru) {
  background: crimson;
}
```
E::before — генерируемый контент перед заданным элементом.
E::after — генерируемый контент после элемента.
E > F — выбирает элемент, только если он является прямым потомком родителя (ни во что больше не вложен).
```
DIV > A {
  background: darkviolet;
  color: #FFF;
}
```
E + F — выбирает второй заданный элемент, который следует непосредственно после первого.
```
P + H3 {
  background: darkturquoise;
  color: lightseagreen;
}
```

Продолжение: Css-селекторы, часть 2.

Ссылки по теме:: Сколько весят селекторы?; CSS-селекторы одной таблицей

Метки:: селекторы