Примечание

Internet Explorer поддерживает псевдокласс :-ms-fullscreen.

Chrome, Opera, Safari поддерживают псевдокласс :-webkit-full-screen.

Firefox поддерживает псевдокласс :-moz-full-screen.

Псевдоклассы для каждого браузера следует писать отдельно, а не перечислять их через запятую.

Псевдокласс :hover

Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

Синтаксис

Селектор:hover { ... }

<style>

a:link {

color: #0000d0; /* Цвет ссылок */

padding: 2px; /* Поля вокруг текста */

}

a:hover {

background: #786b59; /* Цвет фона под ссылкой */

color: #ffe; /* Цвет ссылки */

}

</style>

В данном примере псевдокласс :hover применяется к ссылке (элементу <a>), при этом меняется цвет ссылки и фона под ней.

<style>

ul {

width: 180px; /* Ширина меню */

list-style: none; /* Для списка убираем маркеры */

margin: 0; /* Нет отступов вокруг */

padding: 0; /* Убираем поля вокруг текста */

font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */

font-size: 10pt; /* Размер названий в пункте меню */

}

li ul {

position: absolute; /* Подменю позиционируются абсолютно */

display: none; /* Скрываем подменю */

margin-left: 165px; /* Сдвигаем подменю вправо */

margin-top: -2em; /* Сдвигаем подменю вверх */

}

li a {

display: block; /* Ссылка как блочный элемент */

padding: 5px; /* Поля вокруг надписи */

text-decoration: none; /* Подчеркивание у ссылок убираем */

color: #666; /* Цвет текста */

border: 1px solid #ccc;/* Рамка вокруг пунктов меню */

background-color: #f0f0f0; /* Цвет фона */

border-bottom: none; /* Границу снизу не проводим */

}

li a:hover {

color: #ffe; /* Цвет текста активного пункта */

background-color: #5488af; /* Цвет фона активного пункта */

}

li:hover ul {

display: block; /* При выделении пункта курсором мыши отображается подменю */

}

.brd {

border-bottom: 1px solid #ccc; /* Линия снизу */

}

</style>

В данном примере псевдокласс :hover добавляется к элементу списка (<li>) для создания двухуровневого меню.

Примечание

В браузере Internet Explorer до версии 7.0 псевдокласс :hover работает только для ссылок.

Псевдокласс :in-range

Применяется к элементам форм, у которых введённое пользователем значение находится в заранее заданном диапазоне. Сам диапазон устанавливается с помощью атрибутов min и max, они, соответственно, задают минимальное и максимальное значение.

Синтаксис 

Селектор:in-range { ... }

<style>

input:in-range {

background: #e2edc1; /* Число в указанных пределах */

}

input:out-of-range {

background: #f9c3d2; /* Неверное число */

}

</style>

В данном примере при вводе числа от 1 до 10 у поля становится зелёный цвет фона, как только пишется буква или число больше 10, то цвет фона меняется на розовый.

Псевдокласс :indeterminate

Псевдокласс :indeterminate задаёт стиль для переключателей, когда они находятся в неопределённом состоянии. К примеру, если ни один переключатель не помечен, то они находятся в указанном состоянии. В реальности, стиль применяется только к элементам, у которых DOM-атрибут :indeterminate через JavaScript установлен в значение true. Также этот псевдокласс используется некоторыми браузерами для элемента <progress>.

Синтаксис 

Селектор:indeterminate { ... }

<style>

:indeterminate, :indeterminate + span { background: limegreen; }

input, span { background: red; }

</style>

В данном примере с помощью JavaScript первый элемент формы переводится в неопределённое состояние и к нему применяются стили. Результат примера показан на рис. 

Псевдокласс :invalid

Применяется к полям формы, содержимое которых не соответствует указанному типу. Например, для type="number" должно вводиться число, а не буквы, для type="email" корректный адрес электронной почты.

Синтаксис 

input:invalid { ... }

<style>

input:invalid {

background: #fdd; /* Красный цвет фона */

}

input:valid {

background: #dfd; /* Зелёный цвет фона */

}

</style>

В данном примере корректно заполненные поля формы обозначаются зелёным фоном, а некорректные красным. Результат примера показан на рис. 

Псевдокласс :last-child

Псевдокласс :last-child задаёт стилевое оформление последнего элемента своего родителя.

Синтаксис 

Селектор:last-child { ... }

<style>

.block {

background: #7da7d9; /* Цвет фона */

color: #fff; /* Цвет текста */

}

.block :first-child {

padding: 10px; /* Поля вокруг текста */

}

.block :last-child {

background: #dda458 url(/example/image/line.png) repeat-x; /* Параметры фона */

height: 5px; /* Высота блока */

}

</style>

Результат примера показан на рис. В данном примере псевдокласс :last-child применяется для определения стиля последнего элемента <div>, расположенного внутри контейнера с именем класса block. Это позволило создать цветную полосу внизу блока без включения новых классов.

Псевдокласс :last-of-type

Псевдокласс :last-of-type задаёт правила стилей для последнего элемента определённого типа в списке дочерних элементов своего родителя. К примеру, добавление :last-of-type к селектору li устанавливает стиль только для последнего пункта списка, при этом не распространяется на остальные пункты.

Синтаксис 

Селектор:last-of-type { ... }

<style>

p:last-of-type:after {

content: " ◄"; /* Добавляем символ в конце текста */

color: #c00000; /* Цвет символа */

}

</style>

В данном примере в последнем абзаце текста добавляется специальный символ красного оттенка. Результат примера показан на рис. 

Псевдокласс :link

Псевдокласс :link применяется к ссылкам, которые ещё не посещались пользователем, и задаёт для них стилевое оформление.

Синтаксис 

Селектор:link { ... }

<style>

a:link {

color: #0000d0; /* Цвет ссылок */

}

a:visited {

color: #900060; /* Цвет посещённых ссылок */

}

</style>

Псевдокласс :not

Псевдокласс :not задаёт правила стилей для элементов, которые не содержат указанный селектор.

Синтаксис 

Селектор:not(<Селектор>) { ... }

В качестве селектора могут указываться единичные псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов. Нельзя использовать псевдокласс :not (конструкция :not(:not(...)) запрещена) и псевдоэлементы.

<style>

input:not([type="submit"]) {

border: 1px solid #ccc;

padding: 3px;

}

</style>

В данном примере стиль применяется ко всем элементам <input> за исключением того, в параметрах которого установлено type="submit" (кнопка «Отправить»)