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