CSS Псевдо-классы
Что такое Псевдо-классы?
Псевдо-класс используется для определения особого состояния элемента.
Например, его можно использовать для:
- Стилизации элемента, когда пользователь наводит на него курсор
- Стилизации посещённых и непосещённых ссылок по-разному
- Стилизации элемента, когда он находится в фокусе
Наведи курсор надо мной
Синтаксис
Синтаксис псевдо-классов:
selector:pseudo-class {
property:value;
}
Якорные псевдо-классы
Ссылки могут отображаться по-разному:
Пример
/* непосещенная ссылка */
a:link {
color: #FF0000;
}
/* посещенная ссылка */
a:visited {
color: #00FF00;
}
/* курсор над ссылкой */
a:hover {
color: #FF00FF;
}
/* выбранная (активная) ссылка */
a:active {
color: #0000FF;
}
Попробуйте сами »
Примечание: a:hover ДОЛЖЕН прийти после a:link и
a:visited в определении CSS для того, чтобы быть эффективным! a:active ДОЛЖЕН прийти после a:hover в определении CSS, чтобы быть эффективным! Имена псевдо-классов не чувствительны к регистру.
Псевдо-классы и CSS-классы
Псевдо-классы можно комбинировать с CSS-классами:
Когда вы наведёте курсор на ссылку в примере, она изменит цвет:
Наведение курсора на <div>
Пример использования псевдо-класса :hover на элементе <div>:
Простая всплывающая подсказка
Наведите указатель мыши на элемент <div> чтобы отобразить элемент <p> (например, всплывающую подсказку):
<p>.
Опачки! А вот и я!
Пример
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
Попробуйте сами »
CSS - Псевдо-класс :first-child
Псевдо-класс :first-child соответствует заданному элементу, который является первым дочерним элементом другого элемента.
Соответствует первому элементу <p>
В следующем примере селектор соответствует любому элементу <p>, который является первым дочерним элементом любого элемента:
Соответствует первому элементу <i> во всех элементах <p>
В следующем примере селектор соответствует первому элементу <i> во всех элементах <p>:
Сопоставить все элементы <i> во всех первых дочерних элементах <p>
В следующем примере селектор сопоставляет все элементы <i> в элементах <p>, которые являются первыми дочерними элементами другого элемента:
CSS - Псевдо-класс :lang
Псевдо-класс :lang позволяет определять специальные правила для разных языков.
В приведенном ниже примере :lang определяет кавычки для элементов <q> с lang="no":
Пример
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Какой-то текст <q lang="no">Цитата в параграфе</q>
Какой-то текст.</p>
</body>
</html>
Попробуйте сами »
Больше примеров
Добавить разные стили к гиперссылкам
Этот пример демонстрирует, как добавить другие стили к гиперссылкам.
Использование :focus
Этот пример демонстрирует, как использовать псевдо-класс :focus.
Проверьте себя с помощью упражнений!
Все CSS Псевдо-классы
| Селектор | Пример | Описание |
|---|---|---|
| :active | a:active | Выбирает активную ссылку |
| :checked | input:checked | Выбирает каждый проверенный элемент <input> |
| :disabled | input:disabled | Выбирает каждый отключенный элемент <input> |
| :empty | p:empty | Выбирает каждый элемент <p>, который не имеет дочерних элементов |
| :enabled | input:enabled | Выбирает каждый включенный элемент <input> |
| :first-child | p:first-child | Выбирает все элементы <p>, которые являются первым потомком своего родителя |
| :first-of-type | p:first-of-type | Выбирает каждый элемент <p> который является первым элементом <p> своего родителя |
| :focus | input:focus | Выбирает элемент <input> который имеет фокус |
| :hover | a:hover | Выбирает ссылки при наведении мыши |
| :in-range | input:in-range | Выбирает элементы <input> со значением в указанном диапазоне |
| :invalid | input:invalid | Выбирает все элементы <input> с недопустимым значением |
| :lang(language) | p:lang(it) | Выбирает каждый элемент <p> со значением атрибута lang, начинающимся с "it" |
| :last-child | p:last-child | Выбирает все элементы <p>, которые являются последним дочерним элементом своего родителя |
| :last-of-type | p:last-of-type | Выбирает каждый элемент <p>, который является последним элементом <p> своего родителя |
| :link | a:link | Выбирает все не посещенные ссылки |
| :not(selector) | :not(p) | Выбирает каждый элемент, который не является элементом <p> |
| :nth-child(n) | p:nth-child(2) | Выбирает каждый элемент <p>, который является вторым дочерним элементом своего родителя |
| :nth-last-child(n) | p:nth-last-child(2) | Выбирает каждый элемент <p>, который является вторым дочерним элементом своего родителя, считая от последнего дочернего элемента |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Выбирает каждый элемент <p>, который является вторым элементом <p> своего родителя, считая от последнего потомка |
| :nth-of-type(n) | p:nth-of-type(2) | Выбирает каждый элемент <p> который является вторым элементом <p> своего родителя |
| :only-of-type | p:only-of-type | Выбирает каждый элемент <p> который является единственным элементом <p> своего родителя |
| :only-child | p:only-child | Выбирает каждый элемент <p> который является единственным потомком своего родителя |
| :optional | input:optional | Выбирает элементы <input> без атрибута "required" |
| :out-of-range | input:out-of-range | Выбирает элементы <input> со значением вне указанного диапазона |
| :read-only | input:read-only | Выбирает элементы <input> с указанным атрибутом "readonly" |
| :read-write | input:read-write | Выбирает элементы <input> без атрибута "readonly" |
| :required | input:required | Выбирает элементы <input> с указанным атрибутом "required" |
| :root | root | Выбирает корневой элемент документа |
| :target | #news:target | Выбирает текущий активный элемент #news (при нажатии на URL, содержащий это имя якоря) |
| :valid | input:valid | Выбирает все элементы <input> с допустимым значением |
| :visited | a:visited | Выбирает все посещенные ссылки |
Все CSS Псевдо-элементы
| Селектор | Пример | Описание |
|---|---|---|
| ::after | p::after | Вставляет контент после каждого элемента <p> |
| ::before | p::before | Вставляет контент перед каждым элементом <p> |
| ::first-letter | p::first-letter | Выбирает первую букву каждого элемента <p> |
| ::first-line | p::first-line | Выбирает первую строку каждого элемента <p> |
| ::selection | p::selection | Выбирает часть элемента, которая выбрана пользователем |
