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 | Выбирает часть элемента, выбранного пользователем |