ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Псевдо-классы


Что такое Псевдо-классы?

Псевдо-класс используется для определения особого состояния элемента.

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

  • Стилизации элемента, когда пользователь наводит на него курсор
  • Стилизации посещённых и непосещённых ссылок по-разному
  • Стилизации элемента, когда он находится в фокусе

Наведи курсор надо мной


Синтаксис

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

selector:pseudo-class {
  property:value;
}

Якорные псевдо-классы

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

Пример

/* непосещенная ссылка */
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, чтобы быть эффективным! Имена псевдо-классов не чувствительны к регистру.


Псевдо-классы и CSS-классы

Псевдо-классы можно комбинировать с CSS-классами:

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

Пример

a.highlight:hover {
  color: #ff0000;
}
Попробуйте сами »

Курсор на <div>

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

Пример

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="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
Этот пример демонстрирует, как использовать псевдо-класс :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> без атрибута "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 Выбирает часть элемента, которая выбрана пользователем