CSS-селекторы
=============

**Селектор** определяет, к какому элементу применять то или иное CSS-правило.

Обратите внимание - не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.

Базовые селекторы
-----------------

Универсальный селектор

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

**Синтаксис:** `*` `ns|*` `*|*`

**Пример:** `*` будет соответствовать всем элементам на странице.

Селекторы по типу элемента

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

**Синтаксис:** `элемент`

**Пример:** селектор `input` выберет все элементы `<input>`.

Селекторы по классу

Этот базовый селектор выбирает элементы, основываясь на значении их атрибута `class`.

**Синтаксис:** `.имяКласса`

**Пример:** селектор `.index` выберет все элементы с соответствующим классом (который был определён в атрибуте `class="index"`).

Селекторы по идентификатору

Этот базовый селектор выбирает элементы, основываясь на значении их `id` атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе.

**Синтаксис:** `#имяИдентификатора`

**Пример:** селектор `#toc` выберет элемент с идентификатором toc (который был определён в атрибуте `id="toc"`).

Селекторы по атрибуту

Этот селектор выбирает все элементы, имеющие данный атрибут или атрибут с определённым значением.

**Синтаксис:** `[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]`

**Пример:** селектор `[autoplay]` выберет все элементы, у которых есть атрибут `autoplay` (независимо от его значения).

**Ещё пример**: a[href$=".jpg"] выберет все ссылки, у которых адрес заканчивается на ".jpg".

**Ещё пример**: a[href^="https"] выберет все ссылки, у которых адрес начинается на "https".

Комбинаторы
-----------

Комбинатор запятая

Комбинатор `,` это способ группировки, он выбирает все совпадающие узлы.

**Синтаксис:** `A, B`

**Пример:** `div, span` выберет оба элемента - и `<div>` и `<span>`.

Комбинатор потомков

Комбинатор `' '` (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).

**Синтаксис:** `A B`

**Пример:** селектор `div span` выберет все элементы `<span>`, которые находятся внутри элемента `<div>`.

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

Комбинатор `'>'` в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.

**Синтаксис:** `A > B`

**Пример:** селектор `ul > li` выберет только дочерние элементы `<li>`, которые находятся внутри, на первом уровне вложенности по отношению к элементу `<ul>`.

Комбинатор всех соседних элементов

Комбинатор `'~'` выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.

**Синтаксис:** `A ~ B`

**Пример:** `p ~ span` выберет все элементы `<span>`, которые находятся после элемента `<p>` внутри одного родителя.

Комбинатор следующего соседнего элемента

Комбинатор `'+'` выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.

**Синтаксис:** `A + B`

**Пример:** селектор `h2 + p` выберет первый элемент `<p>`, который находится *непосредственно* после элемента `<h2>` (en-US).

Псевдо
------

Псевдоклассы

Знак `:` позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.

**Пример:** `a:visited` соответствует всем элементам `<a>` которые имеют статус "посещённые".

**Ещё пример**: `div:hover` соответствует элементу, над которым проходит указатель мыши.

**Ещё пример**: `input:focus` соответствует полю ввода, которое получило фокус.

Псевдоэлементы

Знак `::` позволяет выбрать вещи, которых нет в HTML.

**Пример:** `p::first-line` соответствует первой линии абзаца `<p>`.

Версии CSS
----------

| Specification |
| --- |
| Selectors Level 4  |

Смотрите также
--------------

CSS специфичность