 |
Псевдокласс :nth-last-child
|
|
|
|
Псевдокласс:nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса:nth-child отсчёт ведётся не от первого элемента, а от последнего.
Синтаксис
Селектор:nth-last-child(odd | even | <число> | <выражение>) {...}Значения
Odd Все нечётные номера элементов.
Even Все чётные номера элементов.
<число> Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке.
<выражение> Задаётся в виде an+b, где a и b целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2...
Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 2 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
| Табл. 2. Результат для различных значений псевдокласса | ||
| Значение | Номера элементов | Описание |
| Последний элемент, является синонимом псевдокласса:last-child. | ||
| Пятый элемент с конца. | ||
| 2n | 2, 4, 6, 8, 10 | Все чётные элементы, аналог значения even. |
| 2n+1 | 1, 3, 5, 7, 9 | Все нечётные элементы, аналог значения odd. |
| 3n+2 | 2, 5, 8, 11, 14 | — |
| -n+3 | 3, 2, 1 | — |
| 5n-2 | 3, 8, 13, 18, 23 | — |
| even | 2, 4, 6, 8, 10 | Все чётные элементы. |
| odd | 1, 3, 5, 7, 9 | Все нечётные элементы. |
В данном примере псевдокласс:nth-last-child используется для выделения цветом всех нечётных колонок, начиная с последней
|
|
|
Псевдокласс:nth-last-of-type
Псевдокласс:nth-last-of-type используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов. В отличие от псевдокласса:nth-of-type отсчёт ведётся не от первого элемента, а от последнего.
Синтаксис
Селектор:nth-last-of-type(odd | even | <число> | <выражение>) {...}Значения
odd
Все нечётные номера элементов.
even
Все чётные номера элементов.
<число>
Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это соответствует последнему элементу в списке.
<выражение>
Задаётся в виде an+b, где a и b целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2...
Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 3 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
| Табл. 3. Результат для различных значений псевдокласса | ||
| Значение | Номера элементов | Описание |
| Последний элемент. | ||
| Пятый элемент с конца. | ||
| 2n | 2, 4, 6, 8, 10 | Все чётные элементы, аналог значения even. |
| 2n+1 | 1, 3, 5, 7, 9 | Все нечётные элементы, аналог значения odd. |
| 3n+2 | 2, 5, 8, 11, 14 | — |
| -n+3 | 3, 2, 1 | — |
| 5n-2 | 3, 8, 13, 18, 23 | — |
| even | 2, 4, 6, 8, 10 | Все чётные элементы. |
| odd | 1, 3, 5, 7, 9 | Все нечётные элементы. |
|
|
|
Псевдокласс:nth-of-type
Псевдокласс:nth-of-type используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов.
Синтаксис
Селектор:nth-of-type(odd | even | <число> | <выражение>) {...}Значения
odd
Все нечётные номера элементов.
even
Все чётные номера элементов.
<число>
Порядковый номер указанного элемента. Нумерация начинается с 1, это будет первый элемент в списке.
<выражение>
Задаётся в виде an+b, где a и b целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2...
Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.
За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.
В табл. 4 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.
| Табл. 4. Результат для различных значений псевдокласса | ||
| Значение | Номера элементов | Описание |
| Первый элемент. | ||
| Пятый элемент. | ||
| 2n | 2, 4, 6, 8, 10 | Все чётные элементы, аналог значения even. |
| 2n+1 | 1, 3, 5, 7, 9 | Все нечётные элементы, аналог значения odd. |
| 3n+2 | 2, 5, 8, 11, 14 | — |
| -n+3 | 3, 2, 1 | — |
| 5n-2 | 3, 8, 13, 18, 23 | — |
| even | 2, 4, 6, 8, 10 | Все чётные элементы. |
| odd | 1, 3, 5, 7, 9 | Все нечётные элементы. |
В данном примере нечётные картинки выравниваются по левому краю окна, а чётные картинки по правому
|
|
|
Псевдокласс:only-child
Псевдокласс:only-child применяется к дочернему элементу, только если он единственный у родителя. Аналогичен использованию:first-child:last-child или:nth-child(1):nth-last-child(1).
Синтаксис
Селектор:only-child {... }
Псевдокласс:only-of-type
Псевдокласс:only-of-type применяется к дочернему элементу указанного типа, только если он единственный у родителя. Аналогичен использованию:first-of-type:last-of-type или:nth-of-type(1):nth-last-of-type(1).
Синтаксис
Селектор:only-of-type {... } <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>only-of-type</title> <style> img:only-of-type { border: 2px solid red; /* Параметры рамки */ } </style> </head> <body> <p><img src="image/figure.jpg" alt=""> <img src="image/figure.jpg" alt=""></p> <p><img src="image/figure.jpg" alt=""></p> </body> </html>В примере псевдокласс:only-of-type применяется к селектору img, в правилах стиля которого задаётся рамка красного цвета для картинок. Сама рамка добавляется к изображениям, которые у своих родителей (в данном случае это тег <p>) встречаются только один раз. В первой строке повторяется два изображения, поэтому псевдокласс не действует, во второй строке вставлено одно изображение, для него:only-of-type и работает.
Псевдокласс:optional
Применяет стилевые правила к элементу <input>, у которого не задан атрибут required. Он позволяет выделять поля обязательные к заполнению перед отправкой формы. Таким образом:optional применяется к необязательным полям формы.
Синтаксис
input:optional {... } <style> input:optional { opacity: 0.5; /* Полупрозрачность */ } </style>В данном примере необязательное текстовое поле делается полупрозрачным с помощью свойства opacity.
Псевдокласс:out-of-range
Применяется к полям форм, у которых введённое пользователем значение выходит из заданного диапазона. Псевдокласс работает только для тех полей, где пользователь может сам ввести значение, даже несмотря на ограничения наложенные атрибутами min и max.
|
|
|
Синтаксис
Селектор:out-of-range {... } <style> input:out-of-range { background: #f9c3d2; /* Цвет фона */ } label { height: 1em; } input:out-of-range + label::after { content: 'Неверное число'; /* Выводим текст */ color: #ec008c; /* Цвет текста */ margin-left: 0.5em; /* Отступ слева */ } </style>
Псевдокласс:read-only
Применяется к полям формы, у которых задан атрибут readonly. Такое поле не может быть модифицировано и получить фокус.
Синтаксис
input:read-only {... } <style> input:read-only { opacity: 0.3; /* Полупрозрачность */ } </style>
Псевдокласс:read-write
Применяется к полям формы, доступных для изменения. Псевдокласс:read-write является противоположным по своему действию:read-only, который применяется к полям с атрибутом readonly (только для чтения).
Синтаксис
input:read-write {... } <style> input:read-write { border: 1px solid green; } </style>
Псевдокласс:required
Применяет стилевые правила к элементу <input>, у которого установлен атрибут required. Он позволяет выделять поля обязательные к заполнению перед отправкой формы.
Синтаксис
input:required {... } <style> #comment p { margin: 0 0 5px; /* Отступ снизу */ } #comment label { width: 110px; /* Ширина текста */ float: left; /* Выстраиваем по горизонтали */ text-align: right; /* Текст по правому краю */ padding-right: 10px; /* Поле справа */ } #comment input[type="text"], #comment textarea { width: 320px; /* Ширина текстовых полей */ } input:required { border: 1px solid red; /* Красная рамка для обязательных полей */ } </style>В данном примере обязательным считается поле для ввода имени, оно выделяется красной рамкой за счёт применения псевдокласса:required. Результат примера в Safari 5 показан на рис
Псевдокласс:root
Псевдокласс:root определяет корневой элемент документа. В HTML этот селектор всегда соответствует элементу <html>, но в стилях приоритет:root выше, чем у селектора html.
Синтаксис
:root {... }
Псевдокласс:target
Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе http://www.w3.org/TR/css3-selectors/#target-pseudo происходит переход к элементу, атрибут id которого задан как target-pseudo. Такая запись адреса называется «целевой элемент». Псевдокласс:target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.
Синтаксис
Селектор:target {... } <style> h2:target { background: #fc0; /* Цвет фона */ padding: 3px; } </style>
В данном примере целевой элемент выделяется цветом фона.
Примечание
В Safari до версии 3.0 стилевые правила не применяются, если пользователь использует навигацию в браузере (кнопки «Назад» и «Вперед»).
Псевдокласс:valid
Применяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному типу. Например, для type="number" вводится число, а не буквы, для type="email" корректный адрес электронной почты.
|
|
|
Синтаксис
input:valid {... } <style> input:invalid { background: #fdd; /* Красный цвет фона */ } input:valid { background: #dfd; /* Зелёный цвет фона */ } </style>В данном примере корректно заполненные поля формы обозначаются зелёным фоном, а некорректные красным.
Псевдокласс:visited
Псевдокласс:visited применяется к ссылкам, уже посещённым пользователем, и задаёт для них стилевое оформление.
Синтаксис
a:visited {... } <style> a:link { color: #0000d0; /* Цвет ссылок */ } a:visited { color: #900060; /* Цвет посещённых ссылок */ } </style>
|
|
|
