Пseudo-классы CSS

Что такое класс-предположение?

Классы-предположения используются для определения специальных состояний элементов.

Например, это может быть использовано для:

  • Установить стиль элементов при наведении мыши;
  • Установить различные стили для определённых и неопределённых ссылок;
  • Установить стиль элементов при фокусировке;
Наведите указатель мыши на меня

Синтаксис

Синтаксис классов-предположений:

selector:класс-предположение {
  свойство: значение;
}

Анкерный класс-предположение

Ссылки могут отображаться по-разному:

Пример

/* Неопределенные ссылки */
a:link {
  color: #FF0000;
}
/* Определенные ссылки */
a:visited {
  color: #00FF00;
}
/* Ссылки при наведении мыши */
a:hover {
  color: #FF00FF;
}
/* Выбранные ссылки */
a:active {
  color: #0000FF;
}

Попробуйте сами

Внимание:a:hover Должны следовать за CSS-определениями в a:link и a:visited только после этого!a:active Должны следовать за CSS-определениями в a:hover Они становятся активными только после этого! Имена классов-предположений не чувствительны к регистру.

Классы-предположения и классы CSS

Классы-предположения могут использоваться вместе с классами CSS:

Когда вы наводите указатель мыши на ссылку в примере, цвет меняется:

Пример

a.highlight:hover {
  color: #ff0000;
}

Попробуйте сами

При наведении на <div>;

Использование на элементе <div>; :hover Примеры классов-предположений:

Пример

div:hover {
  background-color: blue;
}

Попробуйте сами

Простая подсказка при наведении

Поставьте мышь на <div> элемент, чтобы показать <p> элемент (аналог подсказки):

Поставьте мышь на меня, чтобы показать <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="en":

Пример

<html>
<head>
<style>
q:lang(en) {
  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>, который является первым ребенком своего родителя.
: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>, который является последним ребенком своего родителя.
: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>, который является вторым ребенком родителя, начиная с последнего ребенка.
:nth-of-type(n) p:nth-of-type(2) Выберите каждый элемент <p>, который является вторым ребенком своего родителя.
:only-of-type p:only-of-type Выберите каждый элемент <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> элемента.
::selection p::selection Выберите часть элемента, выбранного пользователем.