Структурные псевдоклассы позволяют привязать стиль к элементу Web-страницы на основе его местоположения в родительском элементе.
Псевдоклассы:first-child (:first-of-type) и :last-child (:last-of-type) привязывают стиль к элементу Web-страницы, который является, соответственно, первым и последним дочерним элементом своего родителя.
Пример:
UL: first-child { font-weight: bold }
Этот стиль будет применен к пункту, являющемуся первым дочерним элементом своего родителя списка, т.е. к первому пункту списка.
Пример:
TD: last-child { color: green }
Данный стиль будет применен к последнему дочернему элементу каждой строки таблицы – к ее последней ячейке.
Псевдокласс:only-of-type привязывает стиль к элементу Web-страницы, который является единственным дочерним элементом, сформированном с помощью данного тега, в своем родителе.
Псевдокласс:nth-child (:nth-of-type) позволяет привязать стиль к элементам Web-страницы, выбрав их по порядковым номерам, под которыми эти элементы определены в своем родителе:
<основной селектор>:nth-child(<a> n+ <b>) { <стиль> }
После имени данного псевдокласса в скобках указывают формулу, по которой вычисляются номера элементов, к которым будет применен стиль. Эта формула имеет два параметра, задаваемых Web-дизайнером: a и b. Их значения должны представлять собой неотрицательные целые числа.
Сначала Web-обозреватель считывает CSS-код стиля и, руководствуясь его селектором, находит элементы Web-страницы, к которым, возможно, будет применен данный стиль. Также Web-обозреватель определяет родителя этих элементов.
После этого Web-обозреватель разбивает все найденные элементы на группы. Количество элементов в каждой группе задается параметром a приведенной формулы. После разбиения Web-обозреватель вычисляет количество получившихся групп.
|
|
Далее Web-обозреватель последовательно подставляет в формулу вместо n номера получившихся групп, начиная с нуля. В результате каждого прохода вычисления получается номер элемента, к которому применяется стиль.
Для примера создадим таблицу из пяти строк и применим к ней такой стиль:
TR: nth-child(2n+1) { text-align: center }
В стиле мы указали, что группа должна содержать два дочерних элемента. Тогда Web-обозреватель разобьет строки таблицы на две группы, по две строки в каждой.
– Web-обозреватель подставит в формулу n равное 0. После вычисления получится значение 1. Web-обозреватель применит данный стиль к первой строке таблицы.
– Web-обозреватель подставит в формулу n равное 1. После вычисления получится значение 3. Web-обозреватель применит данный стиль к третьей строке таблицы.
Web-обозреватель подставит в формулу n равное 2. После вычисления получится значение 5. Web-обозреватель применит данный стиль к пятой строке таблицы. Поскольку 2 – общее количество групп, то на этом вычисления закончатся.
В результате данный стиль будет применен к каждой нечетной строке нашей таблицы.
Вместо указания формулы в скобках мы можем поставить там предопределенные значения odd и even. Первое привязывает стиль к нечетным дочерним элементам, второе – к четным.
Псевдокласс:nth-last-child (:nth-last-of-type) аналогичен псевдоклассу:nth-child за тем исключением, что отсчет дочерних элементов ведется не с начала, а с конца родительского элемента.
Псевдокласс:empty привязывает стиль к элементам, не имеющим дочерних элементов.
|
|
Пример:
P: empty { display: none }
Этот стиль будет привязан к пустым (не имеющим содержимого) абзацам.
Особый псевдокласс:not позволяет привязать стиль к любому элементу Web- страницы, не удовлетворяющему заданным условиям. Таким условием может быть любой селектор:
<основной селектор>:not(<селектор выбора>) { <стиль> }
Стиль будет привязан к элементу Web-страницы, удовлетворяющему основному селектору и не удовлетворяющему селектору выбора.
Пример:
DIV: not(#cmain) { background-color: yellow }
Здесь мы указали в качестве основного селектора стиль переопределения тега <DIV>, а в качестве селектора выбора – именованный стиль cmain. В результате данный стиль будет применен ко всем блочным контейнерам, за исключением cmain.
А вот стиль, который будет применен ко всем строкам таблицы, за исключением первой:
TR: not(:nth-child(1)) { background-color: grey }
Псевдокласс * ("звездочка") обозначает любой элемент Web-страницы.
Пример:
#cmain > *:first-child { border-bottom: medium solid black }
Этот стиль будет применен к первому элементу любого типа, который непосредственно вложен в контейнер cmain.