Псевдоклассы 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>

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.