Селекторы CSS

Каждый CSS селектор взят из последнего стандарта CSS3.

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

element

Селектор: element.
Описание: селектор типа. Соответствует элементу.
Пример:

p { color: red }
/* соответствует абзацам */

.class

Селектор: .class.
Описание: селектор класса. Соответствует значению атрибута class.
Пример:

.warning { color: red }
/* соответствует элементам, содержащим class="warning" */

#id

Селектор: #id.
Описание: селектор идентификатора. Соответствует значению id атрибута.
Пример:

#warning { color: red }
/* matches elements containing id="warning" */

*

Селектор: *.
Описание: универсальный селектор. Соответствует всему.
Пример:

* { color: red }
/* соответствует всему */

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

[attribute]

Селектор: [attribute].
Описание: сопоставляет элементы, содержащие заданный атрибут.
Пример:

	a[href] { color: red }
/* сопоставляет элементы с атрибутом href */

[attribute=»x»]

Селектор: [attribute=»x»].
Описание: сопоставляет элементы, содержащие данный атрибут, с заданным значением.
Пример:

a[href="/sitemap/"] { color: red }
/* сопоставляет элементы с атрибутом и значением href="/sitemap/" */

[attribute~=»x»]

Селектор: [attribute~=»x»].
Описание: сопоставляет элементы, содержащие данный атрибут, со значением, которое содержит вложенное значение в списке, разделённом пробелом.
Пример:

abbr[title~="Style"] { color: red }
/* сопоставляет элементы abbr с заголовком, содержащим 'Style' (например, в названии ="Cascading Style Sheets") */

[attribute|=»x»]

Селектор: [attribute|=»x»].
Описание: сопоставляет элементы, содержащие данный атрибут, со значением, которое содержит вложенное значение в списке, разделённом дефисом.
Пример:

html[lang|="en"] { color: red }
/* сопоставляет html-элементы с атрибутом lang, которые содержит 'en' (например в названии="en-gb") */

[attribute^=»x»]

Селектор: [attribute^=»x»].
Описание: сопоставляет элементы, содержащие данный атрибут, со значением, которое начинается с чего-либо.
Пример:

	a[href^="http://"] { color: red }
/* соответствует элементу с атрибутом href, значение которого начинается с 'http://' */

[attribute$=»x»]

Селектор: [attribute$=»x»].
Описание: сопоставляет элементы, содержащие данный атрибут, со значением, которое заканчивается чем-то.
Пример:

a[href$=".com"] { color: red }
/* соответствует элементу с атрибутом href, значение которого заканчивается на '.com' */

[attribute*=»x»]

Селектор: [attribute*=»x»].
Описание: сопоставляет элементы, содержащие данный атрибут, со значением, которое содержит что-то.
Пример:

a[href*="htmldog"] { color: red }
/* сопоставляет элементы с атрибутом href, значение которого содержит 'htmldog' */

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

:link

Селектор: :link.
Описание: соответствует ссылке, которую никто не посещал.
Пример:

	a:link { color: blue }

:visited

Селектор: :visited.
Описание: соответствует ссылке, по которой вы прошли.
Пример:

	a:visited { color: purple }

:active

Селектор: :active.
Описание: соответствует активируемому элементу, например ссылке, по которой нажимают.
Пример:

	a:active { color: red }

:hover

Селектор: :hover.
Описание: соответствует элементу, на поле которого наведён курсор.
Пример:

a:hover { text-decoration: none }

:focus

Селектор: :focus.
Описание: соответствует элементу, который имеет фокус, например, тому, к которому была добавлена вкладка.
Пример:

a:focus { border: 1px solid yellow }

:target

Селектор: :target.
Описание: соответствует элементу, на который была ссылка (через <a href=»#x»…, например).
Пример:

h2:target { color: red }
/* соответствует заголовку второго уровня, который был связан с */

:lang()

Селектор: :lang().
Описание: соответствует элементу данного языка.
Пример:

p:lang(fr) { color: red }
/* соответствует абзацам, которые объявлены или иным образом считаются французскими */

:first-child

Селектор: :first-child.
Описание: соответствует первому дочернему элементу.
Пример:

p:first-child { color: red }
/* соответствует первому дочернему элементу элемента, если это абзац */

:last-child

Селектор: :last-child.
Описание: соответствует последнему дочернему элементу.
Пример:

div p:last-child { color: blue }
/* соответствует последнему дочернему элементу элемента, если это абзац */

:first-of-type

Селектор: :first-of-type.
Описание: соответствует первому брату своего типа в элементе.
Пример:

li:first-of-type { color: red }
/* соответствует первому экземпляру элемента списка внутри элемента */

:last-of-type

Селектор: :last-of-type.
Описание: соответствует последнему аналогу своего типа в элементе.
Пример:

li:last-of-type { color: blue }
/* соответствует последнему экземпляру элемента списка внутри элемента */

:nth-child()

Селектор: :nth-child().
Описание: соответствует элементу, который является дочерним элементом с порядковым номером его родительского элемента.
Пример:

	p:nth-child(3) { color: red }
/* соответствует третьему дочернему элементу элемента, если это абзац */

:nth-last-child()

Селектор: :nth-last-child().
Описание: соответствует элементу, который является дочерним элементом с порядковым номером, в обратном порядке, его родительского элемента.
Пример:

p:nth-last-child(2) { color: blue }
/* соответствует предпоследнему дочернему элементу элемента, если это абзац */

:nth-of-type()

Селектор: :nth-of-type().
Описание: соответствует элементу, который является порядковым номером, родственным его типу.
Пример:

li:nth-of-type(5) { color: red }
/* соответствует пятому экземпляру элемента списка внутри элемента */

:nth-last-of-type()

Селектор: :nth-last-of-type().
Описание: соответствует элементу, который является исходным номером, родственным в обратном порядке его типу.
Пример:

li:nth-of-type(5) { color: red }
/* соответствует предпоследнему экземпляру элемента списка внутри элемента */

:only-child

Селектор: :only-child.
Описание: соответствует элементу, если он является единственным дочерним элементом его родительского элемента.
Пример:

article p:only-child { color: red }
/* соответствует абзацу, если он является единственным дочерним элементом элемента article */

:only-of-type

Селектор: :only-of-type.
Описание: сопоставляет элемент, если он является единственным аналогом своего типа.
Пример:

article aside:only-of-type { color: blue }
/* соответствует дополнительному элементу, если это единственный дополнительный элемент в элементе article */

:empty

Селектор: :empty.
Описание: сопоставляет элемент, у которого нет дочерних элементов или содержимого.
Пример:

td:empty { border-color: red }
/* сопоставляет ячейки данных таблицы, в которых ничего нет 'em */

:root

Селектор: :root.
Описание: соответствует корневому элементу документа. Это будет html элемент в HTML.
Пример:

:root { background: yellow }

:enabled

Селектор: :enabled.
Описание: соответствует элементам управления формой, которые не отключены.
Пример:

input:enabled { border-color: lime }
/* соответствует элементам ввода, которые не отключены */

:disabled

Селектор: :disabled.
Описание: соответствует элементам управления формой, которые отключены.
Пример:

input:enabled { border-color: red }
/* соответствует отключённым элементам ввода */

:checked

Селектор: :checked.
Описание: соответствует элементу ввода типа радио или флажка, который отмечен.
Пример:

input:checked { outline: 3px solid yellow }
/* соответствует проверенным входным элементам */

:not()

Селектор: :not().
Описание: псевдокласс согласования. Соответствует элементу, который не соответствует селектору.
Пример:

p:not(:first-child) { color: orange }
/* соответствует абзацам, которые не являются первыми дочерними */

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

::first-line

Селектор: ::first-line.
Описание: соответствует первой текстовой строке в элементе.
Пример:

p::first-line { font-weight: bold }
/* соответствует первой строке абзаца */

::first-letter

Селектор: ::first-letter.
Описание: соответствует первой букве в элементе.
Пример:

p::first-letter { font-size: 2em }
/* соответствует первой букве в абзаце */

::before

Селектор: ::before.
Описание: используется с content свойством для генерации содержимого перед исходным содержимым элемента.
Пример:

h1::before { content: "*" }
/* помещает звездочку в начало заголовка верхнего уровня */

::after

Селектор: ::after.
Описание: используется с content свойством для генерации содержимого после начального содержимого элемента.
Пример:

h1::after { content: "+" }
/* ставит знак "плюс" в конце заголовка верхнего уровня */

Нацеливание на первую букву и первую строку с использованием псевдоэлементов.
Псевдоэлементы также могут быть определены с использованием одинарного, а не двойного двоеточия (:first-line в отличие от ::first-line, например). Хотя это олдскульный подход, он также, по самому этому факту, более широко поддерживается браузерами.

Комбинаторы

selector selector

Селектор: selector selector.
Описание: комбинатор-потомок. Сопоставляет элементы, которые являются потомками другого элемента.
Пример:

aside p { color: red }
/* соответствует абзацам внутри элементов, содержащих class="warning" */

selector > selector

Селектор : selector > selector.
Описание: дочерний комбинатор. Сопоставляет элементы, которые являются дочерними по отношению к другому элементу.
Пример:

.warning > p { color: red }
/* соответствует абзацам, которые являются дочерними элементами элементов, содержащих class="warning" */

selector + selector

Селектор: selector + selector.
Описание: комбинатор смежного родства. Сопоставляет элементы, которые непосредственно следуют за другим элементом.
Пример:

h1 + * { color: red }
/* соответствует первому элементу, который следует за заголовком верхнего уровня */

selector ~ selector

Селектор : selector ~ selector.
Описание: общий комбинатор родственных элементов. Сопоставляет элементы, которые следуют за другим элементом.
Пример:

h2 ~ p { color: red }
/* соответствует каждому абзацу, который следует за заголовком второго уровня */

Помимо базовых селекторов, некоторые другие могут вызывать проблемы с несовместимостью, особенно со старыми браузерами. Как всегда, тщательно протестируйте.
Страницы в тему:

Добавить комментарий