Руководство по псевдоклассам в CSS

Псевдоклассы 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 на клавиатуре;

Псевдокласс :first-child

Псевдокласс :first-child соответствует элементу, который является первым дочерним элементом некоторого другого элемента. Селектор ol li:first-child в приведенном ниже примере выбирает первый элемент упорядоченного списка и удаляет у него верхнюю границу.

ol li:first-child {
    border-top: none;
}

Псевдокласс :last-child

Псевдокласс :last-child соответствует элементу, который является последним дочерним элементом некоторого другого элемента. Селектор ul li:last-child в приведенном ниже примере выбирает последний элемент из неупорядоченного списка и удаляет у него правую границу.

ul li:last-child {
    border-right: none;
}

Псевдокласс :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) для элементов.

Псевдокласс :lang

Языковой псевдокласс :lang позволяет создавать селекторы на основе языковых настроек для определенных тегов. Псевдокласс :lang в приведенном ниже примере определяет кавычки для элементов <q>, которым явно задано значение языка no.

q:lang(no) {
    quotes: "~" "~";
}
/* HTML code snippet */
<p>Какая-то <q lang="no">цитата</q> в абзаце.</p>

Псевдоклассы и CSS-классы

Псевдоклассы можно комбинировать с CSS-классами.

Ссылка с class="red" в приведенном ниже примере будет отображаться красным цветом.

a.red:link {
    color: #ff0000;  /* style rule */
}
/* HTML code snippet */
<a class="red" href="#">Click me</a>