Псевдокласс в CSS — это ключевое слово, добавленное к селектору, которое определяет его особое состояние. Псевдокласс не может существовать сам по себе. Он должен быть прикреплён к селектору. Псевдокласс будет определять только определённое состояние этого селектора. Синтаксис:
селектор:псевдокласс { }Как и с обычными классами, псевдоклассы можно совмещать вместе в одном селекторе любое число псевдоклассов. Рассмотрим подробно список основных псевдоклассов:
1. :active
Псевдокласс :active соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью — это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.
Также псевдокласс :active срабатывает при использовании клавиши TAB на клавиатуре. Обычно это используется для HTML-элементов <a> и <button>, но может применяться и к другим элементам.
Пример:
/* html */
<body>
<h1>Пример CSS-селектора :active</h1>
<p>Следующая ссылка станет салатовой в момент клика по ней: <a href="it-black.ru">Сайтик</a>.</p>
</body>/* css */
a:active
{
color: lime; /* активные ссылки */
} 2. :checked
псевдоклассы :checked находит любые элементы radio (<input type=»radio»>), checkbox (<input type=»checkbox»>) или option (<option> внутри <select>), которые выбраны или включены. Пользователь может изменить это состояние, нажав на элемент, или выбрав другое значение, в этом случае :checked повторно не применится к элементу, а сохранится.
Примеры:
/* любой "кликабельный" элемент */
:checked {
width: 50px;
height: 50px;
}
/* только радиокнопки */
input[type="radio"]:checked {
margin-left: 25px;
}
/* только чекбоксы */
input[type="checkbox"]:checked {
display: none;
}
/* только элементы option */
option:checked {
color: red;
}3. :hover
Псевдокласс :hover срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его. Пример:
/* html */
<p>Наведите курсор <a href="#">на эту ссылку</a> и увидите, как она становится красной.</p>/* css */
a { color: blue; }
a:hover { color: red; }4. :visited
Псевдокласс :visited позволяет выбирать ссылки, которые были посещены. По умолчанию ссылки отображаются синими и при посещении становятся фиолетовыми. Примеры:
a:visited { color: #4b2f89; }
a:visited { background-color: white }5. :focus
Псевдокласс :focus применяется, когда элемент получает фокус, либо при выборе его пользователем при помощи клавиатуры, либо активацией его мышью (например, при вводе формы).
Пример:
/* html */
<input class="first-name" value="Я буду красным, если на меня попадёт фокус">
<input class="last-name" value="Я буду синим при фокусе">/* css */
.first-name:focus {
color: red;
}
.last-name:focus {
color: blue;
}6. :link
Псевдокласс :link возволяет выбирать ссылки внутри элементов. Он выберет любую ссылку, которая ещё не была посещена, даже те, которые уже стилизованы, используя селекторы с другими, относящимися к ссылкам, псевдоклассам типа :hover, :active или :visited,. Пример:
a:link {color: slategray;}
.external:link {background-color: lightblue;}7. :lang
Данный псевдокласс определяет язык, который используется в документе или его фрагменте. С помощью псевдокласса :lang можно задавать определённые настройки, характерные для разных языков. Пример:
/* html */
<p>Цитата на английском: <q lang="en">То be or not to be</q>.</p>/* css */
p {
font-size: 1.5em; /* Размер текста */
}
q:lang(en) {
quotes: "\201C" "\201D"; /* Вид кавычек для английского языка */
}В этой статье мы рассмотрели небольшую часть псевдоклассов в css. Существует множество различных псевдоклассов. Примеры различных псевдоклассов можно найти в интернете в открытом доступе.