:active
Псевдокласс :active определяет стиль активного элемента. Это такое состояние элемента, которое происходит между щелчком и отпусканием клавиши мыши. В основном применяется к ссылкам и кнопкам, но ими не ограничен.
:blank
Псевдокласс :blank представляет пустые элементы, иными словами такие, которые не содержат дочерних элементов или текста. По своему действию похож на :empty, но :blank, в отличие от него, считает пустыми элементы, содержащие пробел или перенос строк.
:checked
Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox), флажки (radio) и пункты списка (option), когда они находятся в положение «включено». Переключение элементов в такое состояние происходит с помощью атрибута checked элемента <input> или пользователем.
input[type="radio"]:checked { ... }
input[type="checkbox"]:checked { ... }
option:checked { ... }
:default
Псевдокласс :default применяет стиль к элементам форм, которые установлены по умолчанию в группе похожих элементов. Например, у нас может быть две кнопки для отправки данных формы на сервер. Одна из этих кнопок задана по умолчанию, мы можем изменить её стиль через :default.
:disabled
Псевдокласс :disabled используется для применения стиля к заблокированным элементам форм. Такие элементы не могут получить фокус, быть нажатыми или активированы, в текстовых полях нельзя набирать текст.
:empty
Псевдокласс :empty представляет пустые элементы, иными словами такие, которые не содержат дочерних элементов, текста, пробелов или переносов строк. К примеру, <p></p> является пустым элементом, а <p> </p>, <p> </p> или <p>эге</p> уже нет.
:enabled
Псевдокласс :enabled используется для применения стиля к доступным (не заблокированным) элементам форм. По умолчанию, все элементы форм являются доступными, если в коде HTML к ним не добавляется атрибут disabled.
:first-child
Псевдокласс :first-child задаёт стиль первого элемента в группе братских элементов (имеющих одного родителя).
:first-of-type
Псевдокласс :first-of-type задаёт стиль первого элемента определённого типа в группе братских элементов (имеющих одного родителя).
:focus
Псевдокласс :focus определяет стиль для элемента, получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор.
:focus-within
Псевдокласс :focus-within определяет стиль элемента, когда он сам или элементы внутри него получают фокус. В отличие от :focus, который применяется непосредственно к самому элементу, :focus-within работает для родителя. Это позволяет выделять цветом или другими методами всю форму или отдельные её части, когда пользователь работает с полями формы.
:fullscreen
Псевдокласс :fullscreen применяется к элементам, когда браузер находится в полноэкранном режиме. При этом скрывается заголовок окна, адресная строка, вкладки, меню и другие стандартные элементы и браузер отображается на весь экран. Для перехода из стандартного режима в полноэкранный и обратно обычно применяется клавиша F11.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:fullscreen</title>
<script>
function fullScreen() {
var el = document.getElementById('msg'); // Получаем элемент
if (el.webkitRequestFullscreen) el.webkitRequestFullscreen(); // Chrome, Opera, Safari
else if (el.mozRequestFullScreen) el.mozRequestFullScreen(); // Firefox
else if (el.msRequestFullscreen) el.msRequestFullscreen(); // Internet Explorer, Edge
else if (el.requestFullscreen) el.requestFullscreen(); // Стандарт
}
</script>
<style>
body { margin: 0; }
#msg {
padding: 10px;
background: #bc7062;
color: #fff;
}
#msg:-ms-fullscreen { background: #6088a5; }
#msg:-webkit-full-screen { background: #6088a5; }
#msg:-moz-full-screen { background: #6088a5; }
</style>
</head>
<body>
<div id="msg">
Страница отображается в полноэкранном режиме.
</div>
<p><button onclick="fullScreen()">Посмотреть на полном экране!</button></p>
</body>
</html>
:hover
Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.
:in-range
Применяется к элементам форм, у которых введённое пользователем значение находится в заранее заданном диапазоне. Сам диапазон устанавливается с помощью атрибутов min и max, они, соответственно, задают минимальное и максимальное значение.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:in-range</title>
<style>
input:in-range {
background: #e2edc1; /* Число в указанных пределах */
}
input:out-of-range {
background: #f9c3d2; /* Неверное число */
}
</style>
</head>
<body>
<form>
<p>Введите число от 1 до 10</p>
<p><input type="number" min="1" max="10" value="1"></p>
</form>
</body>
</html>
В данном примере при вводе числа от 1 до 10 у поля становится зелёный цвет фона, как только пишется буква или число больше 10, то цвет фона меняется на розовый.
:indeterminate
Псевдокласс :indeterminate задаёт стиль для переключателей, когда они находятся в неопределённом состоянии. К примеру, если ни один переключатель не помечен, то они находятся в указанном состоянии. В реальности, стиль применяется только к элементам, у которых DOM-атрибут :indeterminate через JavaScript установлен в значение true. Также этот псевдокласс используется некоторыми браузерами для элемента <progress>.
:invalid
Применяется к полям формы, содержимое которых не соответствует указанному типу. Например, для type="number" должно вводиться число, а не буквы, для type="email" корректный адрес электронной почты.
:lang
Определяет язык, который используется в документе или его фрагменте. С помощью псевдокласса :lang можно задавать определённые настройки, характерные для разных языков, например, вид кавычек в цитатах.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lang</title>
<style>
p {
font-size: 1.5em; /* Размер текста */
}
q:lang(de) {
quotes: "\201E" "\201C"; /* Вид кавычек для немецкого языка */
}
q:lang(en) {
quotes: "\201C" "\201D"; /* Вид кавычек для английского языка */
}
q:lang(fr), q:lang(ru) { /* Вид кавычек для русского и французского языка */
quotes: "\00AB" "\00BB";
}
</style>
</head>
<body>
<p>Цитата на французском языке: <q lang="fr">Ce que femme veut, Dieu le veut</q>.</p>
<p>Цитата на немецком: <q lang="de">Der Mensch, versuche die Gotter nicht</q>.</p>
<p>Цитата на английском: <q lang="en">То be or not to be</q>.</p>
</body>
</html>
:last-child
Псевдокласс :last-child задаёт стиль последнего элемента в группе братских элементов (имеющих одного родителя).
:last-of-type
Псевдокласс :last-of-type задаёт стиль последнего элемента определённого типа в группе братских элементов (имеющих одного родителя).
:link
Псевдокласс :link применяется к ссылкам, которые ещё не посещались пользователем, и задаёт для них стилевое оформление.
:not
Псевдокласс :not задаёт правила стилей для элементов, которые не содержат указанный селектор.
input:not([type="submit"]) {
border: 1px solid #ccc;
padding: 3px;
}
:nth-child
Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.
Селектор:nth-child(odd | even | <число> | <выражение>) {...}
tr:nth-child(2n) {
background: #f0f0f0; /* Цвет фона */
}
tr:nth-child(1) {
background: #666; /* Цвет фона */
color: #fff; /* Цвет текста */
}
:nth-last-child
Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child отсчёт ведётся не от первого элемента, а от последнего.
:nth-last-of-type
Псевдокласс :nth-last-of-type используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-of-type отсчёт ведётся не от первого элемента, а от последнего.
:nth-of-type
Псевдокласс :nth-of-type используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов.
img:nth-of-type(2n+1) { float: left; }
img:nth-of-type(2n) { float: right; }
:only-child
Псевдокласс :only-child применяется к дочернему элементу, только если он является единственным у родителя.
:only-of-type
Псевдокласс :only-of-type применяется к дочернему элементу указанного типа, только если он единственный у родителя.
:optional
Применяет стилевые правила к элементу <input>, у которого не задан атрибут required, он позволяет выделять поля обязательные к заполнению перед отправкой формы. Таким образом :optional применяется к необязательным полям формы.
:out-of-range
Применяется к полям форм, у которых введённое пользователем значение выходит из заданного диапазона. Псевдокласс работает только для тех полей, где пользователь может сам ввести значение, даже несмотря на ограничения наложенные атрибутами min и max.
:placeholder-shown
Определяет стиль элемента <input> или <textarea>, который в данный момент отображает текст подсказки, заданной атрибутом placeholder. Такая подсказка обычно исчезает при наборе текста.
input {
border: 1px solid green; /* Зелёная рамка */
}
input:placeholder-shown {
border-color: red; /* Красная рамка */
}
:read-only
Применяется к полям формы, у которых задан атрибут readonly. Такое поле не может быть модифицировано, при этом оно получает фокус, а данные в таком поле можно выделить и скопировать.
:read-write
Применяется к полям формы, доступных для изменения. Псевдокласс :read-write является противоположным по своему действию :read-only, который применяется к полям с атрибутом readonly (только для чтения).
:required
Применяет стилевые правила к элементу <input>, у которого установлен атрибут required, он позволяет выделять поля обязательные к заполнению перед отправкой формы.
:root
Псевдокласс :root определяет корневой элемент документа. В HTML этот селектор всегда соответствует элементу <html>, но в стилях приоритет :root выше, чем у селектора html.
:target
Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе http://www.w3.org/TR/css3-selectors/#target-pseudo происходит переход к элементу, атрибут id которого задан как target-pseudo. Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.
h2:target {
background: #fc0; /* Цвет фона */
padding: 3px;
}
:valid
Применяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному типу. Например, для type="number" вводится число, а не буквы, для type="email" корректный адрес электронной почты.
:visited
Псевдокласс :visited применяется к ссылкам, уже посещённым пользователем, и задаёт для них стилевое оформление.