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

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

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

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

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

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