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

Выборщики CSS-псевдоклассов соответствуют компонентам на основе других условий, а не только на основе определения в дереве документа. CSS-псевдоклассы - это ключевые слова, добавляемые к селектору, которые определяют особое состояние элемента, который нужно выбрать. Например, :hover можно использовать для изменения цвета кнопки при наведении на нее курсора мыши.

Что такое псевдокласс?

CSS динамические псевдоклассы позволяют устанавливать стили элементов в динамических состояниях, таких как наведение, активное состояние и фокус, а также элементы, существующие в дереве документа, но не доступные для выбора другими селекторами, без добавления их ID или класса, например, для первого или последнего подэлемента.

Pseudo-классы начинаются с двоеточия (:). Их грамматика может быть дана следующим образом: }}

Следующие разделы описывают наиболее часто используемые pseudo-классы.

pseudo-классы для якорей

ИспользованиеЯкорьПseudo-классы для ссылок могут отображаться по-разному:

Эти pseudo-классы позволяют стилизовать нерассмотренные ссылки и стилизовать рассмотренные ссылки. Самый распространенный метод стилизации - удаление подчеркивания с рассмотренных ссылок.

a:link {
　　　　color: blue;
}
a:visited {
　　　　text-decoration: none;
}

Некоторые pseudo-классы для锚ов динамичны - они применяются из-за взаимодействия пользователя с документом (например, наведения или фокусировки и т.д.).

a:hover {
　　　　color: red;
}
a:active {
　　　　color: gray;
}
a:focus {
　　　　color: yellow;
}

Эти pseudo-классы изменяют способ представления ссылок в ответ на действия пользователя.

• :hover применяется, когда пользователь ставит курсор на элемент, но не выбирает его.

• :active применяется, когда элемент активирован или щелкан.

• :focus применяется, когда элемент имеет фокус клавиатуры.

:first-child pseudo-class

Пseudo-класс :first-child соответствует элементам, которые являются первыми детьми других элементов. В следующем примере ol li:first-child выборка выбирает первый список из ordered list и удаляет рамку сверху.

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

:last-seudo pseudo-class

Пseudo-класс :last-child соответствует элементам, которые являются последними детьми других элементов. В следующем примере ul li:last-child выборка выбирает последний список из unordered list и удаляет правую рамку.

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

Pseudo-класс :nth-child

CSS3 ввел новый pseudo-класс :nth-child, который позволяет выбирать один или несколько специфических подобъектов в заданном родительском элементе. Основная грамматика может быть дана :nth-child(N), где N - это параметр, который может быть числом, ключевым словом (even или odd) или формой expressions xn+y, где x и y - это целые числа (например, 1n, 2n, 2n+1, ...).

table tr:nth-child(2n) td {
　　　　background: #eee;
}

Стильные правила в предыдущем примере подчеркивают代替 строк таблицы, не добавляя элементу никакого ID или класса.

Pseudo-класс :lang

Пseudo-класс :lang CSS позволяет создавать селекторы на основе языковой настройки конкретного маркера.Для элементов, явно присвоенных языковой стоимости, определены кавычки no.

q:lang(no) {
　　　　quotes: "~" "~";
}
/* фрагмент кода HTML */ Some text A quote in a paragraph Some text.

Пseudo-классы и классы CSS

Пseudo-классы могут использоваться вместе с классами CSS.

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

a.red:link {　　　　/* правило стиля */
　　　　color: #ff0000;
}
<a class="red" href="#">Нажмите меня</a>　　　　/* фрагмент кода HTML */