Nth child 1: :nth-child() — CSS: Cascading Style Sheets

Разное
30 Дек, 1974
0

Содержание

CSS-псевдоклассы nth-child и nth-of-type | 8HOST.COM

25 февраля, 2022 11:50 дп 31 views | Комментариев нет
В CSS есть несколько псевдоклассов, которые помогут вам быстро оформить ваше приложение. Наличие большого количества опций может быть как плюсом, так и минусом: не всегда сразу понятно, какой псевдокласс использовать и что он на самом деле делает. В данном мануале мы подробно рассмотрим CSS-псевдоклассы nth-child и nth-of-type, чтобы лучше понять, когда их использовать и в чем на самом деле разница.
CSS-псевдоклассы nth-child и nth-of-type интересно изучать именно в сравнении с другими типами псевдоклассов, поскольку они выбирают элементы на основе их положения в DOM. В то время как некоторые псевдоклассы выбирают конкретное состояние элемента (например, к таким относятся hover, active, target), nth-child и nth-of-type больше связаны со структурой разметки.
:nth-child(2n+3): этот параметр требует некоторых вычислений. Цифры могут быть любыми на ваш выбор; а n будет меняться. Данный псевдокласс возьмет выбранные вами элементы, для начала установит в n значение 0 и начнет сложение из этой точки. Таким образом, он работает аналогично циклу for в JavaScript. Он будет перебирать выбранные вами элементы, обновляя значение n, например, вот так: 2(0)+3 = 3, 2(1)+3 = 5, 2(2)+3 = 7, и так далее. В результате псевдокласс выберет третий, пятый, седьмой элемент и т.д.
Это означает, что сначала проверка просматривает все дочерние элементы в родительском элементе в поисках необходимого (элементы абзаца), а затем выбирает все абзацы, которые считаются нечетными элементами.
Абзацы, к которым применен желтый цвет, являются нечетными дочерними элементами абзаца (<p>). Это объясняет, почему абзац после подзаголовка по умолчанию имеет темно-бордовый цвет — на самом деле это «четный» дочерний элемент (нечетный достался заголовку, но такие элементы не отвечают выборке псевдокласса).
Использование CSS-псевдокласса nth-of-type
Псевдокласс nth-of-type очень похож на nth-child. Основное отличие между ними состоит в том, что nth-of-type отдельно рассматривает тип выбираемого элемента перед проверкой любой другой логики.
Давайте воспользуемся нашим предыдущим примером, но вместо этого применим nth-of-type.
<article> <h2>Here's a Header</h2> <p>I'm a paragraph with all kinds of information. </p> <p>Let's add another paragraph for fun.</p> <p>yadda yadda yadda</p> <p>blah blah blah</p> <p>yadda yadda yadda</p> <h4>Here's a Subheader</h4> <p>blah blah blah</p> <p>And maybe just one more.</p> </article>

Стили:
article p { color: maroon; } article p:nth-of-type(odd) { color: goldenrod; }
Цветом по умолчанию по-прежнему остается темно-бордовый, но теперь мы выбираем только нечетные элементы абзаца.
Теперь стили применяются, если элемент соответствует следующим требованиям:
Он представляет собой абзац, родительский элемент которого – article.
Он является нечетным элементом.
Если мы посмотрим на это внимательнее, станет немного яснее, как этот псевдокласс выбирает нужные элементы.

Заголовки (<h2>, <h4>) вообще не учитываются псвдоклассом nth-of-type, потому что он выбирает конкретно по типу элемента. В данном случае его интересуют только элементы <p>.
В конечном итоге выбор между псевдоклассами nth-child и nth-of-type будет зависеть от того, какого стиля вы хотите достичь.
Как правило, если нужно выбрать какой-то интервал независимо от типа элемента, используется nth-child. Однако если нужно выбрать только определенный тип, используется nth-of-type.

Заключение
Селекторы nth-child и nth-of-type отлично поддерживаются браузерами. Проверьте nth-child и nth-of-type на CanIUse.com, чтобы узнать больше.
Читайте также: Что такое специфичность в CSS
Tags: CSS, HTML
nth-child (n), введение, связанное с левым полем
Теги: css3 html5
У меня небольшой интерфейс, и я все еще учусь. Ввиду постоянной необходимости выяснять отношения в процессе изучения интерфейса, я беру платформу CSDN, чтобы записывать атрибуты, которые я изучаю каждый день, учусь вместе и вместе добиваюсь прогресса. Рецензентами считаются одноклассники, которые учились. (Пишу блог впервые, терпи меня)

position：fixed
используется для фиксации положения, например
.j_header{ height: 40px; width: 100%; / * Подлежит закреплению вверху * / position: fixed; }
nth-child
Вот только некоторые из них, с которыми я столкнулся сегодня, можно большенажмите здесь, чтобы просмотреть

:nth-child(n) Селектор соответствует n-му дочернему элементу в родительском элементе, и нет ограничений на тип элемента.
p:nth-child(1) Элементы тега p
li:nth-child(3n) Кратное 3, например, третья метка li, шестая метка li
li:last-child Последний тег li
p:nth-child(n+2) За исключением первого тега p
пример:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> . box { width: 300px; height:300px; background-color: pink; } p:nth-child(1) { background-color: red; } p:nth-child(3n) { background-color: green; } p:last-child { background-color: yellow; } </style> </head> <body> <div> <p> Мне 1 год </p> <p> Мне 2 года </p> <p> Мне 3 года </p> <p> Мне 4 года </p> <p> Мне 5 лет </p> <p> Мне 6 лет </p> <p> Мне 7 лет </p> </div> </body> </html>
Прикрепите рендеринг:
margin-left
в основном сочетается с позиционированием, вот эффект центрирования:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: pink; position: relative; } . box .banner_index { position: absolute; bottom: 10px; left: 50%; margin-left: -100px; } .box .banner_index li { float: left; width: 6px; height: 6px; border-radius: 50%; border: 1px solid white; margin-left: 5px; display: block; } .box .banner_index li.current { background-color: white; } </style> </head> <body> <div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>

[Примечание] Здесь следует отметить одну вещь: если между li и .current есть пробел, то это селектор-потомок. Отсутствие пробела здесь относится к стилю, в котором тег li имеет категорию .current.
Интеллектуальная рекомендация
Компонент шагов ANTD+Vue добавляет пользовательский контент в стиле к панели шагов (ниже)
Если значок, указанный в компоненте Steps в ANTD, не может соответствовать нашим требованиям, вам необходимо использовать пользовательскую картинку для его реализации. Например, реализован следующий п…
Метод Java тяжелая нагрузка и механизм передачи значений
Метод перегрузка концепция: В одном и том же классе разрешен тот же метод имени, до тех пор, пока их параметры или типы параметров различны. Особенности тяжелой нагрузки: Два из одинаковых различий: о…
Разработчик общий сайт
http://www.hollischuang.com/archives/1459?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io В качестве разработчика Java вы часто должны иметь дело с широким спектром инструме…
P4 коммутатор сетевой эксперимент
В настоящее время в моей лаборатории есть коммутатор Edge-core P4, модель которогоWedge 100BF-32XКоммутатор имеет в общей сложности 32 порта 100G, но он может обмениваться данными с сервером 40G через…
gulp-webp генерирует изображения webP в формате .jpg.webp / .png.webp
использоватьgulp-webp Создавать изображения jpg / png в формате webP очень просто, Исходное изображение — 1. jpg, все сгенерированные — 1.webp Лучше напрямую использовать less / sass. 1.jpg.webp прост …
Вам также может понравиться
2018-01-31
проблема: Ошибка запроса ресурса (bg: ресурс, который не нужно запрашивать) решение: 1) Найдите возможные связанные функциональные модули 2) Проверьте, связано ли с запросом место, где активно запраши…
44 Power Query-специфичный метод просмотра функций
Поделитесь учебником по искусственному интеллекту моего учителя! Нулевой фундамент, легко понять!http://blog.csdn.net/jiangjunshow Вы также можете перепечатать эту статью. Делитесь знаниями, приносите…
Используйте основную работу массива для достижения инициализации, значения назначения, значения массива и операции позиционирования массива
Используйте основную работу массива для достижения инициализации, значения назначения, значения массива и операции позиционирования массива Реализация: Определите двухмерный массив B, инициализируйте …
Ошибка HTTP MAPP 404.
0 — не найдено решение
Используйте MAMP в Windows New E: \ MAPP \ MAMP \ MAMP \ MAMP \ MAMP \ MAMP \ HTDOCS \ First \ maint.php-файл, используйте сервер Apache и MySQL, а затем открытьhttp://localhost/first/index.phpПоявитс…
Каковы сходства между открытым исходным кодом и кулинарией? Linux Китай
Есть ли хороший способ продвигать дух открытого исходного кода без написания кода? Вот идея: «Кафе с открытым исходным кодом». Флориан Эффенбергер Для полезных ссылок на оригинальный текст…
© 2020-2022 All rights reserved by russianblogs.com
child() — Псевдокласс CSS :nth-child()сопоставляет элементы на основе их положения среди
Псевдокласс CSS :nth-child() сопоставляет элементы на основе их положения среди группы братьев и сестер.
/ * Выбирает второй элемент <li> в списке * / li:nth-child(2) { color: lime; } / * Выбирает каждый четвертый элемент среди любой группы братьев и сестер * / :nth-child(4n) { color: lime; }
Syntax
:nth-child() принимает единственный аргумент, который описывает шаблон для сопоставления индексов элементов в списке братьев и сестер. Индексы элементов начинаются с 1.
Keyword values
odd
Представляет элементы,числовое положение которых в серии братьев и сестер является нечетным:1,3,5 и т.д.
even
Представляет элементы,числовое положение которых в серии братьев и сестер равномерно:2,4,6 и т.д.
Functional notation
<An+B>
Представляет элементы в списке, индексы которых совпадают с индексами, найденными в пользовательском шаблоне чисел, определяемом An+B , где:
A — целочисленный размер шага,
B — целочисленное смещение,
n — все неотрицательные целые числа, начиная с 0.
Его можно прочитать как элемент списка An + B.
Formal syntax
:nth-child( <nth> [ of <complex-selector-list> ]? )where <nth> = <an-plus-b> | even | odd<complex-selector-list> = <complex-selector>#where <complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*where <compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!<combinator> = '>' | '+' | '~' | [ '||' ]where <type-selector> = <wq-name> | <ns-prefix>? '*'<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector><pseudo-element-selector> = ':' <pseudo-class-selector><pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'where <wq-name> = <ns-prefix>? <ident-token><ns-prefix> = [ <ident-token> | '*' ]? | <id-selector> = <hash-token><class-selector> = '. ' | '$' | '*' ]? '='<attr-modifier> = i | s
Examples
Example selectors
tr:nth-child(odd) или tr:nth-child(2n+1)
Представляет нечетные строки таблицы HTML:1,3,5 и т.д.
tr:nth-child(even) или tr:nth-child(2n)
Представляет четные строки таблицы HTML:2,4,6 и т.д.
:nth-child(7)
Представляет седьмой элемент.
:nth-child(5n)
Представляет элементы 5 [=5×1], 10 [=5×2], 15 [=5×3] и т . д. Первым в результате формулы будет возвращен 0 [=5×0], в результате чего несоответствие, так как элементы индексируются с 1, тогда как n начинается с 0. Сначала это может показаться странным, но имеет больше смысла, когда часть B формулы >0 , как в следующем примере.
:nth-child(n+7)
Представляет седьмой и все следующие элементы: 7 [= 0 + 7], 8 [= 1 + 7], 9 [= 2 + 7] и т. Д.
:nth-child(3n+4)
Представляет элементы 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], и т.п.
:nth-child(-n+3)
Представляет первые три элемента.[=-0+3,-1+3,-2+3]
p:nth-child(n)
Представляет каждый элемент <p> в группе братьев и сестер. Это выбирает те же элементы, что и простой p — селектор (хотя и с более высокой специфичностью).
p:nth-child(1) или p:nth-child(0n+1)
Представляет каждый <p> , который является первым элементом в группе братьев и сестер. Это то же самое, что и селектор :first-child (и имеет ту же специфику).
p:nth-child(n+8):nth-child(-n+15)
Представляет восьмой-пятнадцатый <p> элементы группы родных братьев.
Detailed example
HTML
<h4><code>span:nth-child(2n+1)</code>, WITHOUT an <code><em></code> among the child elements.</h4> <p>Children 1, 3, 5, and 7 are selected.</p> <div> <span>Span 1!</span> <span>Span 2</span> <span>Span 3!</span> <span>Span 4</span> <span>Span 5!</span> <span>Span 6</span> <span>Span 7!</span> </div> <br> <h4><code>span:nth-child(2n+1)</code>, WITH an <code><em></code> among the child elements.</h4> <p>Children 1, 5, and 7 are selected.<br> 3 is used in the counting because it is a child, but it isn't selected because it isn't a <code><span></code>.</p> <div> <span>Span!</span> <span>Span</span> <em>This is an `em`. </em> <span>Span</span> <span>Span!</span> <span>Span</span> <span>Span!</span> <span>Span</span> </div> <br> <h4><code>span:nth-of-type(2n+1)</code>, WITH an <code><em></code> among the child elements.</h4> <p>Children 1, 4, 6, and 8 are selected.<br> 3 isn't used in the counting or selected because it is an <code><em></code>, not a <code><span></code>, and <code>nth-of-type</code> only selects children of that type. The <code><em></code> is completely skipped over and ignored.</p> <div> <span>Span!</span> <span>Span</span> <em>This is an `em`.</em> <span>Span!</span> <span>Span</span> <span>Span!</span> <span>Span</span> <span>Span!</span> </div>
CSS
html { font-family: sans-serif; } span, div em { padding: 5px; border: 1px solid green; display: inline-block; margin-bottom: 3px; } . first span:nth-child(2n+1), .second span:nth-child(2n+1), .third span:nth-of-type(2n+1) { background-color: lime; }
Result
© 2005–2021 Авторы MDN.
Лицензия Creative Commons Attribution-ShareAlike License v2.5 или более поздняя.
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
:nth-child() — CSS: Каскадные таблицы стилей
Псевдокласс CSS :nth-child() сопоставляет элементы на основе их положения в группе братьев и сестер.
Обратите внимание, что в синтаксисе element:nth-child() количество дочерних элементов включает дочерние элементы любого типа; но это считается совпадением, только если элемент в этой дочерней позиции имеет указанный тип элемента.
:nth-child() принимает один аргумент, описывающий шаблон для сопоставления индексов элементов в списке братьев и сестер. Индексы элементов отсчитываются от 1.
:nth-child( [ из ]? )
Значения ключевых слов
нечетные
Представляет элементы, чье числовое положение в ряду братьев и сестер является нечетным: 1, 3, 5 и т. д.
четный
Представляет элементы, чье числовое положение в ряду братьев и сестер четное: 2, 4, 6 и т. д.
Функциональное обозначение

Представляет элементы в списке, индексы которых соответствуют найденным в пользовательском шаблоне чисел, определяемом An+B , где:
A — целочисленный размер шага,
B — целочисленное смещение,
n — все неотрицательные целые числа, начиная с 0.
Может быть прочитан как An+B -й элемент списка.
Примеры селекторов
tr:n-й ребенок (нечетный) или tr:n-й ребенок (2n+1)
Представляет нечетные строки таблицы HTML: 1, 3, 5 и т. д.
tr:nth-child(четный) или tr:nth-child(2n)
Представляет четные строки таблицы HTML: 2, 4, 6 и т. д.
:n-й ребенок(7)
Представляет седьмой элемент.
:n-й ребенок(5n)
Представляет элементы 5 [=5×1], 10 [=5×2], 15 [=5×3], и т. д. Первый элемент, который будет возвращен в результате формулы 0 [=5×0], что приводит к несоответствию, поскольку элементы индексируются с 1, тогда как n начинается с 0. Сначала это может показаться странным, но это имеет больше смысла, когда B часть формула >0 , как в следующем примере.
:n-й ребенок(n+7)
Представляет седьмой и все следующие элементы: 7 [=0+7], 8 [=1+7], 9 [=2+7], и т. д.
:n-й ребенок(3n+4)
Представляет элементы 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [= (3×3)+4], и т. д.
:n-й ребенок(-n+3)
Представляет первые три элемента. [=-0+3, -1+3, -2+3]
p:n-й ребенок(n)
Представляет каждый
элемент в группе братьев и сестер. Это выбирает те же элементы, что и простой селектор p (хотя и с более высокой специфичностью).
p:nth-child(1) или p:nth-child(0n+1)
Представляет каждый
, который является первым элементом в группе братьев и сестер. Это то же самое, что и : селектор first-child (и имеет ту же специфичность).
p:n-й потомок(n+8):n-й-потомок(-n+15)
Представляет с восьмого по пятнадцатый
элементов группы братьев и сестер.
Подробный пример
HTML

span:nth-child(2n+1), БЕЗ <em">> среди дочерние элементы.
Выбраны дети 1, 3, 5 и 7.
<дел> Диапазон 1! Диапазон 2 Размах 3! Диапазон 4 Размах 5! Диапазон 6 Размах 7!

:nth-child(n)	Селектор соответствует n-му дочернему элементу в родительском элементе, и нет ограничений на тип элемента.
p:nth-child(1)	Элементы тега p
li:nth-child(3n)	Кратное 3, например, третья метка li, шестая метка li
li:last-child	Последний тег li
p:nth-child(n+2)	За исключением первого тега p

span:nth-child(2n+1), С <em">> среди дочерние элементы. <р> Выбраны дети 1, 5 и 7.
3 используется в подсчете, потому что это дочерний элемент, но он не выбран, потому что это не <span">>.
<дел> Размах! Размах Это `em`. Размах Размах! Размах Размах! Размах

span:nth-of-type(2n+1), С <em">> среди дочерние элементы. <р> Выбираются дети 1, 4, 6 и 8.
3 не используется в подсчете или выбрано, потому что это <em">>, а не <span">>, и nth-of-type выбирает только дочерние элементы этого типа. <em">> полностью пропускается и игнорируется.
<дел> Размах! Размах Это `em`. Размах! Размах Размах! Размах Размах!

CSS
HTML { семейство шрифтов: без засечек; } охватывать, делитель { отступ: 5px; граница: 1px сплошной зеленый; отображение: встроенный блок; нижняя граница: 3px; } .first span:nth-child(2n + 1), .Второй диапазон: n-й ребенок (2n + 1), .therth span:nth-of-type(2n + 1) { цвет фона: салатовый; }
Result
Specification
Unknown specification
# nth-child-pseudo
BCD tables only load in the browser
с включенным JavaScript. Включите JavaScript для просмотра данных.
:n-й тип , :n-й-последний-потомок
Последнее изменение: 000Z»> 27 сентября 2022 г. , участниками MDN
:nth-child | CSS-Tricks — CSS-Tricks
Селектор :nth-child позволяет выбрать один или несколько элементов на основе их исходного порядка в соответствии с формулой.
/* Выбор первого элемента списка */ li: nth-ребенок (1) { } /* Выберите 5-й элемент списка */ li: nth-ребенок (5) { } /* Выбираем все остальные элементы списка, начиная с первого */ li: nth-ребенок (нечетный) { } /* Выбираем каждый третий элемент списка, начиная с первого */ li: n-й ребенок (3n - 2) { } /* Выбрать каждый 3-й элемент списка, начиная со 2-го */ li: n-й ребенок (3n - 1) { } /* Выбрать каждый 3-й дочерний элемент, если он имеет класс "el" */ .el:nth-child(3n) { }
Он определен в спецификации CSS Selectors Level 3 как «структурный псевдокласс», что означает, что он используется для стилизации контента на основе его отношений с родительскими и одноуровневыми элементами.
Предположим, мы создаем сетку CSS и хотим удалить поля на каждом четвертом модуле сетки. Вот этот HTML:

Один

Два

Три

Четыре

Пять

Вместо добавления класса к каждому четвертому элементу (например, .last ), мы можем использовать :nth-child :
.module:nth-child(4n) { поле справа: 0; }
Селектор :nth-child принимает аргумент: это может быть одно целое число, ключевые слова четные , нечетные или формула. Если указано целое число, выбирается только один элемент, но ключевые слова или формула будут перебирать все дочерние элементы родительского элемента и выбирать соответствующие элементы — аналогично навигации по элементам в массиве JavaScript. Ключевые слова «четные» и «нечетные» являются прямыми (2, 4, 6 и т. д. или 1, 3, 5 соответственно). Формула построена с использованием синтаксиса an+b , где:
«a» — целое число
«n» — буквенная буква «n»
«+» — оператор, может быть как «+», так и «-»
«b» является целым числом и требуется, если в формулу включен оператор.
Важно отметить, что эта формула представляет собой уравнение и перебирает каждый родственный элемент, определяя, какой из них будет выбран. Часть «n» формулы, если она включена, представляет собой набор возрастающих положительных целых чисел (точно так же, как итерация по массиву). В нашем примере выше мы выбрали каждый четвертый элемент по формуле 4n , что сработало, потому что каждый раз, когда проверялся элемент, «n» увеличивалось на единицу (4×0, 4×1, 4×2, 4×3 и т. д.). Если порядок элемента соответствует результату уравнения, он выбирается (4, 8, 12 и т. д.). Для более подробного объяснения задействованной математики, пожалуйста, прочитайте эту статью.
Чтобы проиллюстрировать это далее, вот несколько примеров допустимых селекторов :nth-child :
К счастью, вам не всегда нужно делать математику самостоятельно — существует несколько :nth-child тестеров и генераторов:
Тестер CSS-Tricks
Тестер Lea Verou
:nth-child(an + b of
)
Существует малоизвестный фильтр, который можно добавить к :nth-child в соответствии со спецификацией CSS Selectors: Возможность выбора :nth-child подмножества элементов, используя формат из . Предположим, у вас есть список смешанного контента: у некоторых есть класс .video , у некоторых есть класс .picture , и вы хотите выбрать первые 3 картинки. Вы можете сделать это с помощью фильтра «из» следующим образом:
:nth-child(-n+3 of .picture) { /* Выбирает первые 3 элемента применяется не ко ВСЕМ детям, а только тем, кто соответствует .picture */ }
Обратите внимание, что это отличается от добавления селектора непосредственно к селектору :nth-child :
.picture:nth-child(-n+3) { /* Не то же самое! Это относится к элементам, соответствующим .picture которые _also_ соответствуют :nth-child(-n+3) */ }
Это может немного запутать, поэтому пример может помочь проиллюстрировать разницу:
Браузер поддерживает фильтр «из» очень ограниченно: на момент написания этой статьи только Safari поддерживал синтаксис. Чтобы проверить статус вашего любимого браузера, вот открытые проблемы, связанные с :nth-child(an+b of s) :
Firefox: Поддержка nth-child(An+B of sel)
Chrome: Реализовать :nth-child(an+b of S)
Достопримечательности
:nth-child перебирает элементы, начиная с верхней части исходного порядка. Единственная разница между ним и :nth-last-child заключается в том, что последний перебирает элементы , начиная с нижней части исходного порядка .
Синтаксис для выбора первого n числа элементов несколько нелогичен. Вы начинаете с -n плюс положительное количество элементов, которые вы хотите выбрать. Например, li:nth-child(-n+3) выберет первые 3 элемента li .
Селектор :nth-child очень похож на :nth-of-type , но с одним важным отличием : он менее специфичен. В нашем примере выше они дадут тот же результат, потому что мы перебираем только элемента .module , но если бы мы перебирали более сложную группу братьев и сестер, :nth-child попытался бы сопоставить все элементы того же уровня, а не только братья и сестры одного и того же типа элемента. Это раскрывает силу :nth-child — может выбрать любой родственный элемент в аранжировке, а не только элементы, указанные перед двоеточием .
NTH-Last-Cill -child Рецепты
Mozilla Docs
Статья QuirksMode
Статья Sitepoint
Поддержка браузера
Хром Сафари Firefox Опера ИЭ Андроид iOS
Любой 3.2+ Любой 9.5+ 9+ Любой Любой
:nth-child был представлен в модуле селекторов CSS 3, что означает, что старые версии браузеров не поддерживают его. Однако поддержка современных браузеров безупречна, а новые псевдоселекторы широко используются в производственных средах. Если вам требуется поддержка старых браузеров, либо полифил для IE, либо используйте эти селекторы некритичными способами, а-ля прогрессивное улучшение, что рекомендуется.
CSS селектор :nth-child() — GeeksforGeeks
Просмотреть обсуждение
Улучшить статью
Сохранить статью
Последнее обновление: 22 авг, 2022
Читать
Обсудить
Посмотреть обсуждение
Улучшить статью
Сохранить статью
Селектор псевдокласса CSS :nth-child() используется для сопоставления элементов на основе их положения в группе братьев и сестер. Он соответствует каждому элементу, который является n-м дочерним элементом, независимо от типа его родителя.
Синтаксис:
:nth-child(число) { // Свойство CSS }
Где число — это единственный аргумент, представляющий шаблон для сопоставления элементов. Оно может быть нечетным, четным или в функциональной записи.
нечетные: Представляет элементы, позиция которых нечетна в ряду: 1, 3, 5 и т.д. и т.д.
функциональное обозначение (): Представляет элементы, позиция братьев и сестер которых соответствует шаблону An+B, для каждого положительного целого числа или нулевого значения n. Здесь A представляет целочисленный размер шага, B представляет целочисленное смещение.
Пример 1: В этом примере выбран каждый нечетный абзац. Используется формула 2n+1, т.е. выбираются 1, 3, 5 и т. д. абзацы.
HTML

< html >

< head >
     < title >CSS :nth-child Selector title >
     < стиль >
     p:nth-child(2n+1) {
         фон: зеленый;
         цвет: белый;
     }
     style >
head >

< body style = "text-align:center" >
     < h2 стиль = "color:green;" >
             GeeksforGeeks
         h2 >
     < h3 >
             CSS :nth-child Selector
        h3 >

<
5
> Портал компьютерных наук для фанатов. > Body > HTML > .0231
Выход:
Пример 2: В этом примере выбирается каждый ровный
, т. Е. 2, 4, 6, и т. Д.
HTML
77777915151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151515151519151519
10! Doctype html>
< HTML >
< >
< >
< >
<
<
<
9 9000 <
0005 Название > < Стиль > LI { Width: 30%; } LI: NTH-Child (даже) { Фон: зеленый;          цвет: белый;      }      style > head > < body style = "Text-Align: Center" > < H3 > CSS: NTH-Child Селектор          h3 >      < p >Sorting Algorithms p >      < ul >          < li >Быстрая сортировка. li0005 < LI > Сорт. < LI > Сорт.0005 body > html >

Output:
Supported Browsers: The browser supported by :nth-child() Селектор перечислены ниже:
Google Chrome 1.0
Microsoft Edge 12.0
Firefox 3.5
Opera 9.5
Apple Safari 3.1
Рекомендуемые статьи Страница : CSS Selector nth Child | Как работает n-й дочерний селектор в CSS? Селектор Nth-child в CSS позволяет вам выбрать один или несколько элементов на основе заданного исходного порядка. Этот селектор N-го дочернего элемента используется для стилизации HTML-элементов особым образом путем применения формулы к N-му дочернему элементу в CSS. Пример реального времени: Предположим, у нас есть календарь, в котором 12 месяцев, в каждом месяце от 4 до 5 недель. Если все строки или столбцы имеют одинаковый цвет, нелегко точно определить все даты, если у нас есть каждая строка или столбец, альтернативно окрашенные в разные цвета, тогда мы можем легко различать четные и нечетные недели. Для этого мы можем покрасить четные ряды в серый цвет, а нечетные — в белый цвет. Это вы можете наблюдать ниже. Синтаксис: tr:nth-child(even) { фон: светло-серый; } tr: n-й ребенок (нечетный) { фон:белый; } Вывод: Как работает n-й дочерний селектор в CSS? Селектор N-го потомка в CSS работал на основе формулы, указанной в селекторе. Селектор N-го потомка будет принимать единственный аргумент, который является целым числом. Это целое число может быть четным или нечетным числом или любой формулой. На основе селектора формул будут проверены все дочерние элементы для применения стилей CSS к этому соответствующему элементу. Синтаксис: <раздел> Один Два Три Четыре Пять Шесть Семь Восемь .ребенок: n-й ребенок (4n) { Цвет: зеленый; } Объяснение: Приведенный выше селектор child:nth-child применяет цвет ко всем 4n элементам (4,8,12,16……) означает Четыре и< класс статьи = «ребенок»> Восемь . Примечание: Internet Explorer и более ранние версии не поддерживают эту концепцию. Примеры реализации CSS-селектора n-го дочернего элемента Ниже приведены примеры CSS-селектора n-го дочернего элемента: Пример №1 — n-й дочерний селектор с четными позициями Код: <голова> <стиль> p:nth-child(even) /*применяем стили только к содержимому четных абзацев*/ { фон: красный; белый цвет; размер шрифта: 20px; } h2 { цвет синий; выравнивание текста: по центру; } . div { граница: сплошная 4 пикселя зеленого цвета; } <тело> <дел> Применить стили CSS к N-му селектору в четных местах Селектор Nth-child в CSS позволяет выбрать один или несколько элементов в зависимости от заданного исходного порядка. Этот селектор N-го дочернего элемента используется для стилизации HTML-элементов определенным образом путем применения формулы к N-му дочернему элементу в CSS. Пример в реальном времени. Предположим, у нас есть календарь, в котором 12 месяцев, в каждом месяце от 4 до 5 недель. Если все строки или столбцы имеют одинаковый цвет, нелегко точно определить все даты, если у нас есть каждая строка или столбец, альтернативно окрашенные в разные цвета, тогда мы можем легко различать четные и нечетные недели. Для этого мы можем покрасить четные ряды в серый цвет, а нечетные — в белый. Это вы можете наблюдать ниже. Селектор N-го потомка в CSS работал на основе формулы, указанной в селекторе. Селектор N-го дочернего элемента принимает единственный аргумент, который является целым числом. Это целое число может быть четным или нечетным числом или любой формулой. На основе формулы селектор проверит все дочерние элементы на предмет применения стилей CSS к соответствующему элементу.

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