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:
При наведении курсора на ссылку в примере ниже, она изменит цвет:
При наведении на элемент <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>,
который является первым ребенком элемента:
Первый ребенок элемента <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 Упражнения
Все 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 | Выбирает часть элемента, выбранного пользователем |