beget banner 468x60beget banner 728x90beget banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180jivo banner 468x60jivo banner 728x90jivo banner 930x180

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

Чтобы эти псевдоклассы нормально работали, вы должны определять их в точном порядке — :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>
skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600smsc banner 480x320smsc banner 728x90smsc banner 120x600

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

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

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

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

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

Руководство по свойству 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 для отдельных сторон используя…
Подробнее