CSS Псевдоклассы
Что такое псевдоклассы?
Псевдокласс используется для определения особого состояния элемента.
Например, он может быть использован для:
- Стиля элемента при наведении курсора мыши
- Стиля посещенных и непосещенных ссылок
- Стиля элемента, для получения фокуса
Наведении курсора мыши
Синтаксис псевдоклассов
Селектор: псевдокласс {
Свойство: значение;
}
Якорь псевдоклассов
Ссылки могут отображаться по-разному:
/* непросмотренная ссылка */
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 для того, чтобы быть эффективнее! Имена псевдоклассов не чувствительны к регистру..
Псевдоклассы и HTML классы
Псевдоклассы должны быть объединены с классами HTML:
При наведении курсора на ссылку в примере, она изменит цвет:
a.highlight:hover {
color: #ff0000;
}
Попробуйте сами »
При наведении курсора на <div>
Пример использования псевдокласса :hover в элементе <div>:
Всплывающая подсказка при наведении
Наведите курсор на элемент <div> для элемента <p> (как всплывающая подсказка):
Подсказка!
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
Попробуйте сами »
CSS псевдокласс - :first-child
Псевдокласс :first-child соответствует заданному элементу, который является первым дочерним элементом другого элемента.
Соответствует первому элементу <p>
В следующем примере селектор соответствует любому элементу <p>, который является первым дочерним элементом любого элемента:
p:first-child{
color: blue;
}
Попробуйте сами »
Первый элемент <i> во всех <p>
В следующем примере селектор соответствует любому элементу <i> во всех элементах <p>:
p i:first-child{
color: blue;
}
Попробуйте сами »
Все элементы <i> в первом элементе <p>
В следующем примере селектор соответствует всем элементам <i> в элементах <p>, которые являются первыми дочерними элементами другого элемента:
p:first-child i{
color: blue;
}
Попробуйте сами »
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-child | :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> |
| ::marker | ::marker | Выбирает маркеры элементов списка |
| ::selection | p::selection | Выбирает часть элемента, выбранного пользователем |