Структурные псевдоклассы CSS

Структурные псевдоклассы CSS

От автора: до сих пор мы учились находить элементы по их атрибутам и состояниям. В CSS3 также можно искать элементы просто по их положению в разметке. Эти селекторы носят название структурные псевдоклассы CSS.

Может быть, звучит это запутанно, но все станет понятнее, когда мы рассмотрим способы их применения. Эти селекторы поддерживаются в IE9 и выше, а также в последних и более старых версиях всех других браузеров за исключением IE8 и ниже:

:root — Корневой элемент – в HTML-файлах это html.

E:nth-child(n) — Элемент E, являющийся n-ным дочерним элементом родителя. Параметр n объясняется в заметке ниже.

E:nth-last-child(n) — Элемент F, являющийся n-ным дочерним элементом родителя E при отсчете с обратной стороны.

li:nth-last-child(1) – последний элемент любого списка, то же самое что и li:last-child. (см. заметку ниже)

E:nth-of-type(n) — N-ный элемент данного типа внутри родителя. Разница между :nth-child и :nth-of-type поясняется в заметке ниже.

E:nth-last-of-type(n) — Как nth-of-type(n), только отсчет идет с последнего элемента внутри родителя.

Заметка: параметры структурных селекторов

Существует 4 псевдокласса, которые в качестве параметра принимают выражение an+b, odd или even. К структурным псевдоклассам относятся :nth-child(an + b), :nth-last-child(an + b), :nth-of-type(an + b) и :nth-last-of-type(an + b). В выражении an+b символ a является целым множителем, b – целый сдвиг, n – переменная.

В самом простом случае внутрь можно передать целое число. Например, E:nth-of-type(3) найдет третий E внутри одного родителя. Можно передать одно или два ключевых слова odd или even. Также можно передавать выражения типа E:nth-of-type(3n+1). 3n – каждый третий элемент (частота), +1 – сдвиг. Сдвиг по умолчанию равен 0. То есть :nth-of-type(3n) найдет 3-й, 6-й и 9-й элементы, а :nth-of-type(3n+1) найдет 1-й, 4-й и 7-й элементы и т.д.

Можно передавать отрицательные сдвиги. В основе CSS лежит лингвистический язык, не программный, поэтому отсчет начинается с 1, а не с 0. Между множителем a и переменной n не должно быть пробелов, сдвиг идет последним.

С помощью этих числовых псевдоклассов можно определить элементы, не добавляя к ним классы. Самый распространенный пример – таблица, в которой каждая следующая строка слегка темнее, чтобы было удобно читать. Раньше для этого требовалось использовать odd и even на теге tr. Сейчас можно просто применить tr:nth-of-type(odd) для выбора всех нечетных строк и не трогать разметку. Можно пойти еще дальше и разукрасить таблицу тремя цветами: берем tr:nth-of-type(3n), tr:nth-of-type(3n+1) и tr:nth-of-type(3n+2) и применяем разные цвета.

E:first-child — Элемент E, если E – первый ребенок внутри родителя. То же самое что E:nth-child(1).

E:last-child — Элемент E, если E – последний ребенок внутри родителя. То же самое что E:nth-last-child(1).

:first-of-type — То же что и :nth-of-type(1).

E:last-of-type — То же что и :nth-last-of-type(1).

E:only-child — Элемент E, если E – единственный ребенок внутри родителя.

E:only-of-type — Элемент E, если E – единственный элемент типа E, являющийся прямым ребенком от родителя.

Заметка: child или type

Работая со структурными селекторами nth-of-type и nth-child, важно понять, что такое child и type. Child ищет все дочерние элементы, подпадающие под выражение, а также проверяет предыдущий элемент на совпадение. Type ищет все элементы, совпадающие сначала с первой частью селектора, после чего уже проверяется выражение.

На примере p:nth-child(3n) браузер ищет каждый третий дочерний элемент родителя. Если дочерний элемент p, то совпадение есть, если нет – совпадения нет. В случае с p:nth-of-type(3n) браузер ищет все дочерние теги p родителя, после чего находит каждый третий p.

Структурные псевдоклассы основаны на родителе и сбрасывают счет для новых родителей. Они смотрят только на прямых потомков. Текстовые узлы не входят в выражение.

E:empty — Элемент без потомков. Это могут быть текстовые узлы. <p>hello</p> и <p> </p> не подойдут под p:empty, а <p></p> и <p><!— comment —></p> подойдут. Этот селектор также находит пустые элементы типа <br> и <input>. В CSS Selectors Level 4 появится p:blank, который будет находить <p> </p>.

E:lang(en) — Элемент языка, обозначенный двумя буквами, например, en. В отличие от E:[lang|=en], где должен быть атрибут lang, селектор E:lang(en) найдет E, если язык был объявлен на самом элементе или любом родителе.

E:not(exception) — Очень полезный селектор: находит элементы, не подпадающие под селектор в скобках.

Селекторы с псевдоклассом :not находят все, что слева от двоеточия и вычитают элементы справа от двоеточия. Сперва элементы находятся по левой части селектора. Например, p:not(.copyright) найдет все параграфы в документе и только потом уберет из них параграфы с классом copyright. Можно сцепить несколько псевдоклассов :not. input:not([type=checkbox]):not([type=radio]) найдет все теги input на странице за исключением типов checkbox и radio.

Автор: Alexis Goldstein, Estelle Weyl, Louis Lazaris

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree