Псевдокласс :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>