seodon.ru | CSS справочник — :nth-child
Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
Псевдокласс CSS :nth-child позволяет применить стили (CSS) к выбранным дочерним элементам другого (родительского) элемента, основываясь на порядке появления их в HTML-коде страницы (дереве документа). Отсчет осуществляется от первого дочернего элемента к последнему с учетом всех дочерних элементов, а не только тех, которые указаны перед псевдоклассом :nth-child. Этим данный псевдокласс отличается от :nth-of-type.
Элемент считается родительским для других (дочерних) элементов, только когда они находятся внутри него на первом уровне вложенности. При этом все элементы, которые находятся на любом уровне вложенности (в том числе и на первом) называются потомками данного элемента.
Тип псевдокласса
Назначение: псевдоклассы.
Применяется: ко всем элементам.
Значения
Значением псевдокласса :nth-child является указание в скобках ключевого слова, числа или арифметического выражения определяющего выборку дочерних элементов.
- even — стили будут применены к каждому четному дочернему элементу (2,4,6,8…).
- odd — применение стилей к каждому нечетному дочернему элементу (1,3,5,7…).
- Число — любое положительное число, указывающее номер элемента , где единица (1) соответствует первому дочернему элементу. Кстати, :nth-child(1) то же самое, что и :first-child.
- Выражение — арифметическое выражение с общим видом an+b или an-b, где a и b положительные, отрицательные числа или ноль, а n — множитель, принимающий значения 0,1,2,3,4… Например, 2n+3 даст последовательность 3,5,7,9… выбранных дочерних элементов. Если b равно нулю, то его можно не указывать, например 2n или 7n. Если a равно нулю, то значение соответствует числу указанному в b.
Если в результате вычисления последовательности некоторые числа окажутся отрицательными или равными нулю, то браузеры их проигнорируют. Например, 2n-4 даст -4,-2,0,2,4,6…, но будут использованы только 2,4,6…
Синтаксис
селектор:nth-child(число | выражение | even | odd) { }Пример CSS: использование :nth-child
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>seodon.ru - CSS псевдокласс :nth-child</title> <style type="text/css"> p { margin: 0 } /* убираем внешние поля у параграфов */ div:nth-child(odd) { color: red; /* цвет текста нечетных дочерних DIV */ } </style> </head> <body> <div>1 блок DIV</div> <div>2 блок DIV</div> <div>3 блок DIV</div> <p>1 параграф</p> <div>4 блок DIV</div> <div>5 блок DIV</div> <p>2 параграф</p> <p>3 параграф</p> <div>6 блок DIV</div> </body> </html>
Результат примера
Результат. Использование псевдокласса CSS :nth-child.
Обратите внимание, что в примере отсчет ведется с учетом всех дочерних элементов тега <BODY> и стили применяются только к тем <DIV>, которые являются нечетными в общем списке.
Версии CSS
| Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Поддержка: | Нет | Нет | Нет | Да |
Браузеры
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | |||
| Версия: | До 9.0 | 9.0 и выше | 2.0 и выше | 2.0 и 3.0 | 3.6 и выше | 9.2 | 9.6 и выше | 3.1 и выше |
| Поддержка: | Нет | Да | Да | Нет | Да | Нет | Да | Да |
как использовать CSS селектор nth-child
От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе с псевдоклассом nth-child.
N значит nth-child
В CSS есть множество мощных селекторов, с помощью которых можно находить элементы на странице и применять к ним стили.
Из-за гибкости выражения для нахождения элементов по шаблону (an+b) псевдокласс nth-child, возможно, является самым мощным. Более подробно данный псевдокласс был разобран в видеоуроке. В этом уроке мы узнаем, когда лучше использовать nth-child, а когда лучше обойтись обычным классом.
Когда нужно использовать nth-child?
Этот вопрос мне очень часто задают студенты. К сожалению, это зависит от ситуации. Это первое, что необходимо учесть. Но я постараюсь дать вам пару базовых критериев.
Во-первых, все селекторы типа nth-child поддерживаются только в IE9 и выше (исключение :first-child). То есть первым делом необходимо определиться с диапазоном браузеров, с которыми вы будете работать. Если вам придется работать с IE8, вы можете использовать обычные классы или :first-child.
Совет 1: если вы поддерживаете IE8, используйте :first-child
Представьте, что у вас есть горизонтальный маркированный список со ссылками меню. По дизайну справа от каждой ссылки должна быть рамка, но кроме последней ссылки.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееНе нужно добавлять рамку справа и затем удалять ее на последнем элементе. Лучше добавьте рамку слева и удалите ее у первого элемента.
.site-nav li { border-left: 2px solid grey; } .site-nav li:first-child { border: 0; }
.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 для альтернативных стилей
Классический пример альтернативных стилей – разный фон для четных и нечетных строк в таблице. Еще один пример – обтекание четных и нечетных блоков контента по левому и правому краю на странице или в контейнере (нить комментариев или диалог).
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееВ таких случаях я использую :nth-child(odd) и :nth-child(even). Чтобы не засорять код, пропишите первое состояние без nth-child, после чего уже используйте nth-child с большей специфичностью для альтернативных стилей.
/* вот так */ .data-table tr { background: white; } .data-table tr:nth-child(even) { background: lightgrey; } /* а не так */ .data-table tr:nth-child(odd) { background: white; } .data-table tr:nth-child(even) { background: lightgrey; }
/* вот так */ .data-table tr { background: white; } .data-table tr:nth-child(even) { background: lightgrey; }
/* а не так */ .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. Классический пример – WP the_content – один большой кусок HTML, который вы либо плохо контролируете, либо не контролируете вообще.
В этой ситуации вам помогут :first-child, :last-child и :nth-child. Вот и все, 5 советов по тому, как использовать или не использовать самые мощные и гибкие CSS селекторы.
Автор: Guy Routledge
Источник: https://www.sitepoint.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
Смотретьcss селектор: nth-child (четный|нечетный) vs: nth-child(int)
У меня есть следующая проблема с псевдо-селектором CSS :nth-child , и я уверен, что я что-то пропустил.
index.html
<html> <head>...</head> <body> <div>first</div> <div>second</div> <div>third</div> <div>fourth</div> <div>fifth</div> </body> </html>
style_does_not_work.css (не работает)
.selector { background-color: #ffffff; }
.selector:nth-child(1) { background-color: #f00000; }
.selector:nth-child(2) { background-color: #ff0000; }
.selector:nth-child(3) { background-color: #fff000; }
.selector:nth-child(4) { background-color: #ffff00; }
.selector:nth-child(5) { background-color: #fffff0; }
style_that_works.css (для доказательства концепции селектора)
.selector { background-color: #ffffff; }
.selector:nth-child(even) { background-color: #f00000; }
.selector:nth-child(odd) { background-color: #ff0000; }
Я немного смущен, почему :nth-child(2) не работает, но :nth-child(even) делает. Есть ли разница или что-то, что я пропустил?
Моя цель-дать фиксированным позиционным элементам динамическое смещение сверху, в то время как элементы вводятся и удаляются с помощью javascript динамически.
Обновление / Дополнительное
К сожалению, я сделал опечатку в приведенном выше примере. Но это, к сожалению, не решает реального случая — даже я вижу рабочий JS-Fiddles (я действительно смущен из-за этого…)
Кроме того, я опубликовал несколько экранов с текущей проблемой:
CSS:
html css css3 css-selectors.notification-area { position: fixed; z-index: 999; width: 500px; height: 100%; overflow: hidden; } .notification-area.top-right { top: 25px; right: 25px; left: auto; -webkit-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s; -moz-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s; -ms-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s; -o-transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s; transition: margin 0.4s, top 0.4s, left 0.4s, right 0.4s, bottom 0.4s; } /* these lines are completely ignored */ .notification-area:nth-child(2) { margin: 125px 0px 0px 0px; } .notification-area:nth-child(3) { margin: 250px 0px 0px 0px; } .notification-area:nth-child(4) { margin: 375px 0px 0px 0px; } .notification-area:nth-child(5) { margin: 500px 0px 0px 0px; } /* this line grabs instead - I don't want to use "even", but it shows me, that the selector :nth-child() should be fine... */ .notification-area:nth-child(even) { margin: 125px 0px 0px 0px; }
Поделиться Источник wildhaber 26 августа 2014 в 11:41
4 Ответов
7
Вы не закрыли div во втором .selector . Работать отлично:
fiddle
Поделиться Alex Char 26 августа 2014 в 11:47
1
Вы пропустили закрывающий тег div во 2-м div.
Поделиться Santy 26 августа 2014 в 11:47
0
Попробуйте изменить nth-child(n) на nth-of-type(n) , так как мы не работаем с их дочерними узлами. Я удалил этот ответ раньше, потому что думал, что настоящая проблема заключалась в том, что вы забыли закрыть один из своих дивов, но вы, похоже, еще не решили его, поэтому я отправлю его снова.
Поделиться
0
Попробуйте это: nth-child (n+1) вместо :nth-child(2)
Поделиться Deeban Babu 26 августа 2014 в 11:48
css: как пропустить скрытый ребенок в nth-child (нечетный) и nth-child (четный)
Я пытаюсь пропустить скрытый ребенок при использовании nth-child (нечетный) и nth-child (четный), но он не пропускает эти скрытые записи. у меня есть следующие HTML и CSS код. <style> ul {…
jQuery: нечетное и: nth-child CSS3 разное
Я обнаружил, что селектор jQuery :odd и CSS3 nth-child (odd) работают по-разному. http://jsfiddle.net/TMDwT/5 / В желтом это CSS nth-child (нечетный), и если вы раскомментируете JS и…
css nth-child(2n+1) перекрасить css после фильтрации элементов списка
У меня есть список из 20+ пунктов. Цвет фона изменяется с помощью селектора: nth-child(2n+1). (т. четный пункт черный, нечетный пункт белый). Когда я нажимаю кнопку, чтобы отфильтровать определенные…
Как работает селектор CSS3 :nth-child()?
Может ли кто-нибудь объяснить мне, как работает селектор CSS3 :nth-child()? В приведенном ниже примере первый элемент <p> выбирается, несмотря на то, что :nth-child(n) имеет значение 2….
nth-child() не работает в ie8 /7
ul li:nth-child(odd){ color:#c0122f; float:left; width:48%; line-height:30px; font-size:15px; } ul li:nth-child(even){ color:#c0122f; width:48%; float:right; line-height:30px; font-size:15px; } на…
использование nth-child (n) с scss и &: nth-child для предоставления детям различных классов
Я пытаюсь сделать некоторые художественные вещи css, я просто раскрашиваю дивы и делаю из них линии. Сначала я делал это так <a href=’#’></a> и стайлинг через [href*=’#’] { &:after {…
jQuery :nth-child() селектор
У меня возникла проблема с применением стилей css к выпадающим меню навигации в пределах WordPress с использованием jQuery. В принципе, у меня есть 5 навигационных ссылок. Цель состоит в том, чтобы…
IE8: заставить селектор `nth-child` работать внутри запросов media?
В моих проектах веб-сайтов я использую запросы media и селектор nth-child . IE8 не поддерживает их из коробки, но есть полифил, чтобы помочь: Respond.js , mediatizr или css3-mediaqueries.js включить…
CSS селектор nth-child
Я столкнулся с проблемами написания немного сложного селектора CSS. Я хочу, чтобы выбрать div с class содержащих ‘btn-group’ , но не ‘open’ Так что у меня есть что-то вроде;…
Как сделать: nth-last-child (1 + нечетный)
Я хочу сделать что-то вроде nth-last-child(1 + odd) , где последний ребенок влияет, но ONLY, если элемент нечетный . nth-last-child(1 + odd) не работает, хотя, так что же мне делать? Бонус: более…
:nth-child() — Уеб технология за разработчици
Псевдокласът в CSS :nth-child() намира съвпадения според тяхното място в множество от съседни елементи.
/* Избира всеки четвърти елемент
сред всяко множество от съседи */
:nth-child(4n) {
color: lime;
}
Правопис
Псевдокласът nth-child се указва с един аргумент, който представлява образец за намиране на съвпадения със съответстващи елементи. Изборът се отнася до съседни елементи, които са на едно и също ниво в йерархията на документа.
Стойности за ключови думи
odd- Избира елементи, чието местоположение в поредица от съседни елементи е нечетно: 1, 3, 5 и т.н.
even- Избира елементи, чието местоположение в поредица от съседни елементи е нечетно: 2, 4, 6 и т.н.
Функционално записване
<An+B>- Избира елементи, чието местоположение в поредица от съседи съответства на образеца
An+Bза всяко положително число или нулева стойност наn. указателят за първия елемент е1. СтойноститеAиBтрябва да са от вида<integer>s.
Правопис
: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> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'where
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s
Примери
Примерни образци за избор
tr:nth-child(odd)ortr:nth-child(2n+1)- Избира нечетните редове в таблица в HTML: 1, 3, 5 и т.н.
tr:nth-child(even)ortr:nth-child(2n)- Избира четните редове в таблица в HTML: 2, 4, 6 и т.н.
:nth-child(7)- Избира седмия елемент.
:nth-child(5n)- Избира всеки пети елемент: 5 [=5×1], 10 [=5×2], 15 [=5×3], и т.н.
:nth-child(3n+4)- Избира четвъртия елемент след всеки трети. Поредицата започва от нула: 4 [= (3×0)+4], 7 [= (3×1)+4], 10 [= (3×2)+4], 13 [= (3×3)+4], etc.
:nth-child(-n+3)- Избира първите три елемента в множество от съседи. [=-0+3, -1+3, -2+3]
p:nth-child(n)- Избира всеки елемент
<p>в множество от съседи. Избират се същите елементи както при обикновен изборp, но се прилагат по-точни указания. p:nth-child(1)orp:nth-child(0n+1)- Избира всеки първи елемент
<p>в множество от съседи. Това е същото като:first-childи има същата точност.
p:nth-child(n+8):nth-child(-n+15)- Избира от осмия до петнадесетия елемент
<p>включително в множество от съседи.
Подробен пример
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;
}Изход
Спецификации
Съвместимост
Update compatibility data on GitHub| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet | |
:nth-child() | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 9 | Opera Full support 9.5
| Safari Full support 3.1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1
| Safari iOS Full support 3.1 | Samsung Internet Android Full support 1.0 |
| Matches elements with no parent | Chrome Full support 57 | Edge No support No | Firefox Full support 52 | IE No support No | Opera Full support 44 | Safari No support No | WebView Android Full support 57 | Chrome Android Full support 57 | Firefox Android Full support 52 | Opera Android Full support 43 | Safari iOS No support No | Samsung Internet Android Full support 7.0 |
of <selector> syntax | Chrome No support No
| Edge No support No | Firefox No support No
| IE No support No | Opera No support No | Safari Full support 9 | WebView Android No support No | Chrome Android No support No | Firefox Android No support No
| Opera Android No support No | Safari iOS Full support 9 | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.