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
Пример: селекторul + li
выберет любой<li>
элемент, который находится непосредственно после элемента<ul>
.
Псевдо
- Псевдоклассы
- Знак
:
позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.
Пример:a:visited
соответствует всем элементам<a>
которые имеют статус "посещённые".
Ещё пример:div:hover
соответствует элементу, над которым проходит указатель мыши.
Ещё пример:input:focus
соответствует полю ввода, которое получило фокус. - Псевдоэлементы
- Знак
::
позволяет выбрать вещи, которых нет в HTML.
Пример:p::first-line
соответствует первой линии абзаца<p>
.
Версии CSS
Спецификация | Статус | Комментарии |
---|---|---|
Selectors Level 4 | Рабочий черновик | Добавление комбинатора колонок || , селекторов структуры сеточной разметки (CSS grid selector), логических комбинаторов, местоположения, временных, состояния ресурсов, лингвистических и UI псевдоклассов, модификаторов для ASCII регистрозависимых и регистронезависимых атрибутов со значениями и без них. |
Selectors Level 3 | Рекомендация | Добавлен комбинатор ~ и древовидные структурные псевдоклассы.Сделаны псевдоэлементы, использующие префикс :: двойное двоеточие. Селекторы дополнительных атрибутов. |
CSS Level 2 (Revision 1) | Рекомендация | Добавлен комбинатор потомков > и комбинатор следующего соседа + .Добавлен универсальный (*) комбинатор и селектор атрибутов. |
CSS Level 1 | Рекомендация | Первоначальное определение. |