Каждый 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 }
/* соответствует каждому абзацу, который следует за заголовком второго уровня */Помимо базовых селекторов, некоторые другие могут вызывать проблемы с несовместимостью, особенно со старыми браузерами. Как всегда, тщательно протестируйте.
Страницы в тему:
