CSS Pseudo-classes
Что такое псевдо-классы?
Псевдо-класс используется для определения специального состояния элемента.
Например, он может быть использован для:
- Стиль элемента, когда пользователь наносит на него указатель мыши
- Стиль посещенных и непосещенных ссылки по-разному
- Стиль элемента, когда он получает фокус
Мышь над мной
Синтаксис
Синтаксис псевдо-классов:
selector:pseudo-class {
property:value;
}
Псевдо-классы привязки
Ссылки могут отображаться различными способами:
Пример
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Примечание: a:hover Должны прийти после a:link и a:visited в CSS определение для того, чтобы быть эффективным! a:active Должны прийти после a:hover в CSS определение для того, чтобы быть эффективным!
Имена псевдо-классов не чувствительны к регистру.
Псевдо-классы и классы CSS
Псевдо-классы могут сочетаться с классами CSS:
При наведении указателя мыши на ссылку в примере она изменит цвет:
Пример
a.highlight:hover {
color: #ff0000;
}
Наведите курсор на <div>
Пример использования псевдо-класса :hover в элементе <div>:
Пример
div:hover {
background-color: blue;
}
Простая подсказка Hover
Наведите указатель мыши на элемент <div>, чтобы отобразить элемент <p> (например, всплывающая подсказка):
Тада! А вот и я!
Пример
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
CSS-: первый-ребенок псевдо-класс
Псевдо-класс :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-The: lang псевдо-класс
:langпсевдо-класс позволяет определить специальные правила для разных языков.
В приведенном ниже примере :lang определяет кавычки для <q> элементов с lang = "No":
Пример
<html>
<head>
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>
Другие примеры
Добавление различных стилей к гиперссылкам
В этом примере демонстрируется добавление других стилей к гиперссылкам.
Использование: фокус
В этом примере демонстрируется использование псевдо-класса: 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> элементов без атрибута "обязательный" |
| :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
| Selector | Example | Пример описания |
|---|---|---|
| ::after | p::after | Вставка содержимого после каждого элемента <p> |
| ::before | p::before | Вставка содержимого перед каждым <p> элементом |
| ::first-letter | p::first-letter | Выбор первой буквы каждого элемента <p> |
| ::first-line | p::first-line | Выбор первой строки каждого элемента <p> |
| ::selection | p::selection | Выбор части элемента, выбранной пользователем |