 |
Псевдокласс :first-of-type
|
|
|
|
Псевдоклассы
Псевдокласс:active
Псевдокласс:active определяет стиль активного элемента. Это такое состояние элемента, которое происходит между щелчком и отпусканием клавиши мыши. В основном применяется к ссылкам и кнопкам, но ими не ограничен.
Синтаксис
Селектор:active {... } <style> a:link { color: #0000d0; /* Цвет ссылок */ } a:visited { color: #900060; /* Цвет посещённых ссылок */ } a:active { color: #f00; /* Цвет активной ссылки */ } </style>В данном примере задаётся цвет обычных, посещённых и активных ссылок.
Псевдокласс:checked
Псевдокласс:checked применяется к элементам интерфейса, таким как переключатели (checkbox), флажки (radio) и пункты списка (option), когда они находятся в положение «включено». Переключение элементов в такое состояние происходит с помощью атрибута checked элемента <input> или пользователем.
Синтаксис
Селектор:checked {... }Примеры использования
input[type="radio"]:checked {... }Стиль применяется только ко включенным переключателям.
input[type="checkbox"]:checked {... }Стиль применяется только к помеченным флажкам (чекбоксам).
option:checked {... }Стиль применяется только к выбранным элементам списка.
<style> input:checked + span { background: #fc0; } </style>
В данном примере текст возле отмеченных флажков выделяется фоновым цветом. Результат примера показан на рис. 1.
Псевдокласс:default
Псевдокласс:default применяет стиль к элементам форм, которые установлены по умолчанию в группе похожих элементов. Например, у нас может быть две кнопки для отправки данных формы на сервер. Одна из этих кнопок задана по умолчанию, мы можем изменить её стиль через:default.
Синтаксис
Селектор:default {... } <title>default</title> <style>:default { background-color: lime; } </style>
В данном примере кнопка Submit, заданная по умолчанию, имеет другой цвет.
|
|
|
Псевдокласс:disabled
Псевдокласс:disabled используется для применения стиля к заблокированным элементам форм. Такие элементы не могут получить фокус, быть нажатыми или активированы, в текстовых полях нельзя набирать текст.
Синтаксис
Селектор:disabled {... } <style> textarea:disabled { background: url(image/dline.png); border: 1px solid #666; padding: 5px; } </style>В данном примере изменен стиль заблокированного текстового поля. Результат примера показан на рис. 3.
Псевдокласс:empty
Псевдокласс:empty представляет пустые элементы, иными словами такие, которые не содержат дочерних элементов, текста или пробелов. К примеру, <p></p> является пустым элементом, а <p> </p>, <p> </p> или <p>эге</p> уже нет.
Синтаксис
Селектор:empty {... } <style> span:empty { background: red; padding: 3px; margin-left: 7px; display: inline-block; } </style>
Псевдокласс:enabled
Псевдокласс:enabled используется для применения стиля к доступным (не заблокированным) элементам форм. По умолчанию, все элементы форм являются доступными, если в коде HTML к ним не добавляется атрибут disabled.
Синтаксис
Селектор:enabled {... } <style> input:enabled { background: red; } </style>
Псевдокласс:first-child
Псевдокласс:first-child применяет стилевое оформление к первому дочернему элементу своего родителя.
Синтаксис
Селектор:first-child {... } <style> B:first-child { color: red; /* Красный цвет текста */ } </style>Результат примера показан на рис. 1. В данном примере псевдокласс:first-child добавляется к селектору b и устанавливает для него красный цвет текста. Хотя контейнер <b> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <b> отображается чёрным цветом. Со следующим абзацем всё начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом. 
|
|
|
Псевдокласс:first-of-type
Псевдокласс:first-of-type задаёт правила стилей для первого элемента в списке дочерних элементов своего родителя. К примеру, добавление:first-of-type к селектору td устанавливает стиль для всех первых ячеек, поскольку родителем для элемента <td> выступает элемент <tr>.
Синтаксис
Селектор:first-of-type {... } <style> table { border-collapse: collapse; /* Убираем двойные границы */ width: 100%; /* Ширина таблицы */ border-spacing: 0; /* Расстояние между ячеек */ } td { border: 1px solid #6A3E14; /* Параметры рамки */ padding: 4px; /* Поля в ячейках */ } tr:first-of-type { background: #808990; /* Цвет фона */ color: #fff; /* Цвет текст */ } td:first-of-type { background: #CFD6D3; /* Цвет фона */ } </style>
Псевдокласс:focus
Псевдокласс:focus определяет стиль для элемента, получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор.
Синтаксис
Селектор:focus {... } <style> #enter.label { width: 80px; /* Ширина блока с текстом */ float: left; /* Расположение в одну строку с полем */ text-align: right; /* Выравнивание по правому краю */ } #enter.form-text { width: 240px; /* Ширина поля */ margin-left: 10px; /* Расстояние между полем и текстом */ border: 1px solid #abadb3; /* Рамка вокруг текстового поля */ padding: 2px; /* Поля вокруг текста */ } #enter.form-item { margin-bottom: 5px; /* Отступ снизу */ } #enter.form-text:focus { background: #ffe; /* Цвет фона */ border: 1px solid #29B0D9; /* Параметры рамки */ } #enter p { margin-left: 90px; /* Сдвиг вправо */ } </style>Результат данного примера показан на рис.. При получении фокуса текстовое поле меняет цвет фона и цвет границы.
Примечание
Chrome не добавляет стиль для элемента a, чтобы заставить его понимать правило a:focus, добавьте к элементу <a> атрибут tabindex.
<a href="1.html" tabindex="1">Ссылка</a>
Псевдокласс:fullscreen
Псевдокласс:fullscreen применяется к элементам, когда браузер находится в полноэкранном режиме. При этом скрывается заголовок окна, адресная строка, вкладки, меню и другие стандартные элементы и браузер отображается на весь экран. Для перехода из стандартного режима в полноэкранный и обратно обычно применяется клавиша F11.
Чтобы псевдокласс работал, предварительно для отдельных элементов следует разрешить полноэкранный режим с помощью скриптов (см. пример).
|
|
|
Синтаксис
Селектор:fullscreen {... }
Пример
<!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>Примечание
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, то цвет фона меняется на розовый.
|
|
|
