Псевдоклассы CSS позволяют стилизовать динамические состояния элемента, такие как наведение (:hover
), активное (:active
) и фокусное (:focus
) состояния, а также элементы, которые существуют в дереве документа, но не могут быть выбраны посредством использования других селекторов без добавления каких-либо идентификаторов (#id
) или классов (.class
) для них, например, первый или последний дочерние элементы.
Псевдокласс всегда начинается с двоеточия (:
). Его синтаксис может быть задан с помощью:
selector:pseudo-class { property: value; }
Теперь поговорим подробнее о наиболее часто используемых псевдоклассах.
Анкорные псевдоклассы
Под анкорными подразумеваются псевдоклассы, которые можно применять только для тега <a>
.
Эти псевдоклассы позволяют стилизовать не посещенные ссылки в отличие от посещенных. В примере показана распространенная техника, которая заключается в удалении подчеркиваний из посещенных ссылок.
a:link {
color: blue;
}
a:visited {
text-decoration: none;
}
Некоторые анкорные псевдоклассы являются динамическими — они применяются в результате взаимодействия пользователя с документом, например, при наведении, фокусе и т. д.
a:hover {
color: red;
}
a:active {
color: gray;
}
a:focus {
color: yellow;
}
Эти псевдоклассы изменяют способ отображения ссылок в ответ на действия пользователя.
:hover
применяется, когда пользователь помещает курсор на элемент, но не выбирает его;:active
применяется, когда элемент активирован или нажат;:focus
применяется, когда элемент имеет фокус, т.е. нажат или выбран с помощью клавишиtab
на клавиатуре;
Чтобы эти псевдоклассы нормально работали, вы должны определять их в точном порядке — :link
, :visited
, :hover
, :active
, :focus
.
Псевдокласс :first-child
Псевдокласс :first-child
соответствует элементу, который является первым дочерним элементом некоторого другого элемента. Селектор ol li:first-child
в приведенном ниже примере выбирает первый элемент упорядоченного списка и удаляет у него верхнюю границу.
ol li:first-child {
border-top: none;
}
Чтобы заставить :first-child
работать в Internet Explorer 8 и более ранних версиях, в верхней части документа должен быть объявлен <!DOCTYPE>
.
Псевдокласс :last-child
Псевдокласс :last-child
соответствует элементу, который является последним дочерним элементом некоторого другого элемента. Селектор ul li:last-child
в приведенном ниже примере выбирает последний элемент из неупорядоченного списка и удаляет у него правую границу.
ul li:last-child {
border-right: none;
}
Селектор CSS :last-child
не работает в Internet Explorer 8 и более ранних версиях. Свойство поддерживается в Internet Explorer 9 и выше.
Псевдокласс :nth-child
CSS3 представляет новый псевдокласс :nth-child
, который позволяет вам ориентироваться на одного или нескольких конкретных дочерних элементов данного родительского элемента. Базовый синтаксис этого селектора может быть задан с помощью :nth-child(N)
, где N
— аргумент, который может быть числом, ключевым словом (четным (even
) или нечетным (odd
)) или выражением в форме xn+y
, где x
и у
— целые числа (например, 1n
, 2n
, 2n+1
, …).
table tr:nth-child(2n) td {
background: #eee;
}
Правило в приведенном выше примере просто выделяют каждую вторую строку таблицы <table>
альтернативным цветом без добавления идентификаторов (#id
) или классов (.class
) для элементов.
Селектор CSS :nth-child(N)
очень полезен в ситуациях, когда вам нужно выбирать элементы, которые появляются внутри дерева документа через определенный интервал или шаблон, например, в четных или нечетных местах и т. д.
Псевдокласс :lang
Языковой псевдокласс :lang
позволяет создавать селекторы на основе языковых настроек для определенных тегов. Псевдокласс :lang
в приведенном ниже примере определяет кавычки для элементов <q>
, которым явно задано значение языка no
.
q:lang(no) {
quotes: "~" "~";
}
/* HTML code snippet */
<p>Какая-то <q lang="no">цитата</q> в абзаце.</p>
Internet Explorer до версии 7 не поддерживает псевдокласс :lang
. IE8 поддерживает только если указан <!DOCTYPE>
.
Псевдоклассы и CSS-классы
Псевдоклассы можно комбинировать с CSS-классами.
Ссылка с class="red"
в приведенном ниже примере будет отображаться красным цветом.
a.red:link {
color: #ff0000; /* style rule */
}
/* HTML code snippet */
<a class="red" href="#">Click me</a>