Css-селекторы

Содержание:
*
E[foo]
E[foo="bar"]
E[foo~="bar"]
E[foo|="bar"]
E:first-child
E:lang(fr)
E::before
E::after
E > F
E + F

В 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;
    }

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

Ссылки по теме:
Сколько весят селекторы?
CSS-селекторы одной таблицей
Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.
Система комментирования от Disqus