Press shift question mark to access a list of keyboard shortcuts
расшифровка
:nth-child — это псевдокласс, используемый для выбора элементов с помощью числового выражения.
Синтаксис довольно сильно отличается от большинства других аспектов CSS и может быть немного сложным, чтобы разобраться, для начала.
В этом эпизоде мы рассмотрим:
- различные способы использования
:nth-child, - немного более гибкий
:nth-of-typeселектор:nth-of-type - и их аналоги селекторов
:nth-last-childи:nth-last-of-type.
:nth-child
:nth-child выбирает дочерние элементы, если их позиция в документе соответствует шаблону, описанному алгебраическим выражением.
Селектор :nth-child выглядит примерно так:
li:nth-child(expression); {}
«Выражение» может быть как even и odd ключевым odd , целым числом или формулой в an+b где a и b — целые числа — положительные или отрицательные.
Так как :nth-child может использоваться для выбора диапазона различных элементов при разных обстоятельствах, трудно объяснить, как он работает и для чего он нужен. Давайте посмотрим на ряд примеров, чтобы проиллюстрировать его использование.
У меня есть неупорядоченный список с 12 элементами списка. Давайте посмотрим, как мы можем использовать :nth-child чтобы соответствовать определенному элементу или шаблону элементов:
<ul> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> <li>lorem ipsum</li> </ul>
Чтобы выбрать третий элемент списка, я мог бы использовать li:nth-child(3) .
Чтобы выбрать все четные элементы, я могу использовать even ключевое слово. И наоборот, я могу использовать :nth-child(odd) чтобы выбрать все нечетные элементы. Это обычно используемые селекторы для чередования цвета фона чередующихся строк в таблице данных.
Чтобы выбрать каждый третий элемент, я могу использовать li:nth-child(3n) .
Чтобы выбрать первые 4 элемента, я могу использовать li:nth-child(-n+4) . Чтобы выбрать все, кроме первых 4 элементов, я могу использовать li:nth-child(n+5) .
Выражение an+b
Мы видели, как :nth-child(odd) может выбирать все элементы с нечетными номерами в списке. Альтернативный подход к использованию odd ключевого слова заключается в использовании выражения 2n+1 .
Но как работает выражение?
Когда выражение в формате an+b содержит ненулевые значения для a и b , дочерние элементы разделяются на группы элементов.
Если бы выражение было 2n+1 , дочерние элементы были бы разбиты на группы по 2. Каждому элементу в группе затем присваивается индекс, начиная с 1. Соответствующим элементом в каждой группе является b й индекс. В этом примере это будет первый элемент.
Если бы выражение было 3n+2 , элементы списка были бы сгруппированы в наборы по 3, и второй элемент в каждой группе был бы сопоставлен.
Если значение b отрицательно, сопоставляемый элемент в группе является bth индексом, но отсчитывается в обратном направлении от индекса 1. В этом случае сопоставленный элемент из группы больше не будет соответствовать элементу в этой группе, но в одном над ним ,
Ключевое слово even может быть выражено как 2n . В этом случае нет значения для b в выражении an+b поэтому каждый элемент ath сопоставляется; 2n будет соответствовать каждому второму элементу, 3n каждому третьему, 4n каждому четвертому и так далее.
Лично я нахожу эту идею разделения дочерних элементов на группы и разработки согласованного индекса для каждой группы очень запутанной — хотя так описывает спецификация CSS-селекторов.
Я могу справиться с идеей сопоставления каждого n-го элемента — каждого 2-го, 3-го или 4-го и т. Д., А затем мне нравится думать как вторая часть выражения как смещение.
В случае 2n+1 я бы прочитал это следующим образом: «Найдите каждый второй элемент, переместите выделение вниз на 1.»
Если бы выражение было 3n-5 оно гласило бы: «Найдите каждый третий элемент и переместите выделение вверх на 5».
Другое :nth-child селекторы :nth-child
:nth-child имеет соответствующий псевдокласс :nth-last-child который работает так же, как :nth-child но в обратном порядке.
li:nth-last-child(3n) начинается с последнего дочернего элемента и работает в обратном направлении, сопоставляя каждый третий элемент снизу списка. Это гораздо реже, и я не думаю, что когда-либо использовал его на производстве.
Тем не менее, очень часто выбирают первый или последний дочерний элемент. Это можно сделать с помощью :nth-child(1) или :nth-last-child(1) но так часто встречаются, также доступны псевдоклассы :first-child и :last-child . :first-child — единственный из этого семейства дочерних селекторов, который работает в IE8 — :last-child а любой из :nth селекторов — нет.
:nth-of-type
Что-то, что меня часто привлекает :nth-child — это то, что селектор просто совпадает на основе индекса дочерних элементов и не учитывает тип элемента.
Давайте посмотрим на следующую разметку для фрагмента контента.
<section> <h1>lorem ipsum;</h1> <p>Aenean commodo ligula eget dolor. Vestibulum dapibus nunc ac augue;</p> <p>Nunc sed turpis. Donec posuere vulputate arcu;</p> </section>
У меня есть раздел с заголовком и подзаголовком и рядом абзацев. Я хочу, чтобы первый абзац немного выделялся, увеличив font-size до 1.5em .
Я мог бы попробовать section p:first-child , так как я хочу стилизовать первый абзац в разделе. Но это не работает, так как первый дочерний элемент раздела на самом деле является элементом h1 . В этом случае мне нужно использовать селектор :first-of-type .
Есть серия селекторов этого типа; :first-of-type :last-of-type :nth-of-type и :nth-last-of-type . Они ведут себя так же, как :nth child но соответствуют nth экземплярам определенного типа элемента.
Эти селекторы сложные, но очень мощные. Поддержка браузера IE9 +, за исключением :first-child который является IE8 +. Имейте это в виду, когда используете их, но они наверняка вытащили меня из нескольких сложных ситуаций в прошлом.
Бонус: Быстрый Совет
В этом кратком совете мы рассмотрим, когда вы можете использовать nth-child и когда вам следует использовать стандартный класс.
Когда я должен использовать nth-child ?
Это вопрос, который мне задают студенты довольно часто. Первое, что нужно отметить, это то, что (к сожалению) это зависит от ситуации. Но я постараюсь предоставить некоторые хорошие исходные критерии.
Во-первых, все селекторы, подобные :nth-child , поддерживаются только в IE9 и выше (за исключением :first-child ), поэтому первое, что нужно проверить, — это возраст браузера, который должен поддерживать ваш проект.
Если вам нужна поддержка IE8 (во-первых, жаль это слышать!), Тогда вы можете сделать только одну вещь; использовать классы или использовать :first-child .
Совет 1: Использование :first-child при поддержке IE8
Представьте, что у вас есть горизонтальный неупорядоченный список навигационных ссылок, и ваш дизайн должен иметь границу справа от каждого элемента, но не последний элемент.
Вместо добавления границы справа и необходимости удалить ее из последней, добавьте рамку слева и удалите ее из первой.
.site-nav li { border-left: 2px solid grey; } .site-nav li:first-child { border: 0; }
Вы можете использовать аналогичный трюк для границ сверху / снизу тоже.
Если вам повезло, что вам не нужна поддержка IE8, читайте дальше …
Совет 2: Используйте :first-child и :last-child вместо классов
Если вы строите или используете сеточную систему и вам нужно сделать что-то особенное для первого и последнего столбцов подряд, я бы предпочел использовать псевдоклассы :first-child и :last-child добавлять классы, такие как .first или .last прямой в HTML.
Это будет держать ваш HTML аккуратнее и означает, что вам не нужно слишком много думать при создании макета. Макет может быть иногда сложным, поэтому, чем меньше вы думаете об этом, тем лучше.
Совет 3: Используйте :nth-child для чередующихся стилей
Классическим примером чередующихся стилей может быть разноцветный фон для четных или нечетных строк в таблице. Другой может быть плавающими четными или нечетными блоками контента слева и справа от страницы или контейнера — возможно, для цепочки комментариев или сообщения.
Для таких ситуаций я использую :nth-child(odd) и :nth-child(even) . Чтобы сохранить ваш код простым, вы должны просто написать первое состояние без nth-child а затем использовать более высокую специфику использования nth-child для установки альтернативного стиля.
/* do this */ .data-table tr { background: white; } .data-table tr:nth-child(even) { background: lightgrey; } /* not this */ .data-table tr:nth-child(odd) { background: white; } .data-table tr:nth-child(even) { background: lightgrey; }
Совет 4: избегайте странных и сложных выражений nth-child
Для других, более сложных вариантов выбора страницы, я бы предпочел использовать классы непосредственно в HTML, чем сбивать с толку выражения nth-child .
li:nth-child(-n+3) или li:nth-child(5n+1):not(nth-child(3n-1)) просто слишком сумасшедшие и требуют много сил, чтобы расшифровать то, что на самом деле они означают (подсказка: я понятия не имею — я только что придумал последний, хотя технически это могло бы сработать!)
К сожалению, некоторые проекты настолько сложны, что часто такой подход кажется необходимым, но представьте себе, что вы возвращаетесь к этому виду кода спустя месяцы и пытаетесь понять, что вы пытались сделать — это может занять некоторое время даже для самого компетентного в CSS эксперты!
Совет 5: используйте nth-child когда вы не можете контролировать HTML
Это может звучать как странное утверждение. Конечно, как разработчик или дизайнер одной из наших самых важных задач является контроль HTML.
Ситуация, о которой я говорю здесь, это когда вы имеете дело с системой управления контентом.
При создании шаблонов для веб-сайта на основе CMS вы, вероятно, сможете управлять структурой HTML и добавлять свои классы и атрибуты данных по мере необходимости. Но иногда в вашем шаблоне есть место, где он выплевывает весь контент из текстового поля или текстовой области внутри CMS. Классическим примером является the_content WordPress, который представляет собой один большой кусок HTML, который вы можете иметь практически без контроля.
В этих случаях селекторы :first-child :last-child и :nth-child могут вывести вас из затруднительного положения.
Итак, вот оно. 5 советов по использованию (или не использованию) одного из самых мощных и гибких CSS-селекторов.