Nth css: :nth-child() | CSS (Примеры)

Содержание

:nth-child() | CSS (Примеры)

Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

Псевдоклассы

Синтаксис

/* Выбирает каждый четвёртый элемент
   среди любой группы соседних элементов */
:nth-child(4n) {
  color: lime;
}

Значения

odd: Все нечётные номера элементов.
even: Все чётные номера элементов.
<число>: Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
<выражение>: Задаётся в виде an±b, где a и b — целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2…; Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

Результат для различных значений псевдокласса

Значение	Номера элементов	Описание
`1`	1	Первый элемент, является синонимом псевдокласса `:first-child`
`5`	5	Пятый элемент
`2n`	2, 4, 6, 8, 10,…	Все чётные элементы, аналог значения even
`2n+1`	1, 3, 5, 7, 9,…	Все нечётные элементы, аналог значения `odd`
`3n`	3, 6, 9, 12, 15,…	Каждый третий элемент
`3n+2`	2, 5, 8, 11, 14,…	Каждый третий элемент, начиная со второго
`n+4`	4, 5, 6, 7, 8,…	Все элементы, кроме первых трёх
`-n+3`	3, 2, 1	Первые три элемента
`5n-2`	3, 8, 13, 18, 23,…	—
`even`	2, 4, 6, 8, 10,…	Все чётные элементы
`odd`	1, 3, 5, 7, 9,…	Все нечётные элементы

Допустимо комбинировать два псевдокласса :nth-child для выбора диапазона элементов. Здесь будут выбраны все элементы со второго по пятый.

:nth-child(n + 2):nth-child(-n + 5) {
  /* … */
}

Спецификации

Примеры

Пример 1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>nth-child</title>
    <style>
      table {
        width: 100%; /* Ширина таблицы */
        border-spacing: 0; /* Расстояние между ячейками */
      }
      tr:nth-child(2n) {
        background: #f0f0f0; /* Цвет фона */
      }
      tr:nth-child(1) {
        background: #666; /* Цвет фона */
        color: #fff; /* Цвет текста */
      }
    </style>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>&nbsp;</td>
        <td>2134</td>
        <td>2135</td>
        <td>2136</td>
        <td>2137</td>
        <td>2138</td>
      </tr>
      <tr>
        <td>Нефть</td>
        <td>16</td>
        <td>34</td>
        <td>62</td>
        <td>74</td>
        <td>57</td>
      </tr>
      <tr>
        <td>Золото</td>
        <td>4</td>
        <td>69</td>
        <td>72</td>
        <td>56</td>
        <td>47</td>
      </tr>
      <tr>
        <td>Дерево</td>
        <td>7</td>
        <td>73</td>
        <td>79</td>
        <td>34</td>
        <td>86</td>
      </tr>
      <tr>
        <td>Камни</td>
        <td>23</td>
        <td>34</td>
        <td>88</td>
        <td>53</td>
        <td>103</td>
      </tr>
    </table>
  </body>
</html>

В данном примере псевдокласс :nth-child используется для изменения стиля первой строки таблицы, а также для выделения цветом всех чётных строк (рис. 1).

Пример 2

HTML

<h4>
  <code>span:nth-child(2n+1)</code>, БЕЗ элемента
  <code>&lt;em&gt;</code> в группе элементов-потомков.
</h4>
<p>Элементы 1, 3, 5 и 7 будут выбраны.</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>, С элементом
  <code>&lt;em&gt;</code> в группе элементов-потомков.
</h4>
<p>
  Элементы 1, 5 и 7 будут выбраны.<br />
  3 используется в подсчёте потому что это элемент-потомок,
  но он не выбран потому что он не
  <code>&lt;span&gt;</code>.
</p>
<div>
  <span>Span!</span>
  <span>Span</span>
  <em>Это `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>, С элементом
  <code>&lt;em&gt;</code> в группе элементов-потомков.
</h4>
<p>
  Элементы 1, 4, 6 и 8 будут выбраны.<br />
  3 не используется в подсчёте и не выбран, потому что это
  <code>&lt;em&gt;</code>, но не <code>&lt;span&gt;</code>,
  а <code>nth-of-type</code> выбирает только потомков этого
  типа. Элемент <code>&lt;em&gt;</code> полностью
  пропускается и игнорируется.
</p>
<div>
  <span>Span!</span>
  <span>Span</span>
  <em>Это `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;
}

Результат

См. также

Ссылки

Nth-child и nth-of-type • Про CSS

:nth-child

— один из моих самых любимых селекторов, потому что с помощью него можно ~~делать клевые разноцветные штуки~~ собирать элементы списка в группы произвольной длины и делать с ними разные интересные вещи: от полосатых таблиц до целых разноцветных дизайнов, и все это без необходимости задавать дополнительные классы или как-то менять разметку.

Вот простой пример полосатых таблиц:

Полоски помогают легче скользить глазами по длинной строке или столбцу, это увеличивает читабельность больших таблиц, а сделать это можно всего лишь парой строчек в CSS:


TR:nth-child(odd) {
  background: #EEE;
}


TD:nth-child(odd) {
  background: #EEE;
}

Или вот что можно сделать с обычным списком вроде такого:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Никаких дополнительных классов, все сделано только с помощью :nth-child:

Вот пример разноцветного дизайна для ЖЖ, где используется этот же эффект:

Если у вас есть ЖЖ, вы можете установить этот дизайн из каталога.

Как работает nth-child()?

В круглых скобках задается размер цикла: например (3n) выберет каждый третий элемент. Также можно задать сдвиг вперед или назад: (3n+1) — найдет каждый третий и сделает один шаг вперед, а (3n-2) — два шага назад от найденого. Если размер цикла не задан —

(n) — выберутся все элементы списка. Если размер цикла не задан, но задано конкретное число — (5) — выберется элемент списка с этим индексом.

nth-child в своем цикле считает все элементы, находящиеся на одном уровне вложенности относительно родительского элемента.

Селектор работает во всех современных браузерах с поддержкой CSS3.

Примеры

:nth-child(3n)

Выбирает каждый 3-й элемент списка.

:nth-child(3n+1)

Выбирает каждый 3-й элемент списка и делает сдвиг на один шаг вперед. Таким образом можно выбрать первые элементы в каждой группе.

:nth-child(even) = :nth-child(2n)

(even) — ключевое слово, выбирает четные элементы списка, как если бы мы задали

(2n).

:nth-child(odd) = :nth-child(2n+1)

(odd) — ключевое слово, выбирает нечетные элементы, как если бы мы задали (2n+1).

:nth-child(3n-1) = :nth-child(3n+2)

Выбирает каждый 3-й элемент списка и делает сдвиг на один шаг назад.

:nth-child(5) = :nth-child(0n+5)

Выберет 5-й элемент списка.

:nth-child(n+6)

Выберет все элементы начиная с 6-го.

:nth-child(-n+6)

Выберет 6 элементов с начала списка.

Сочетания селекторов

:nth-child(n+3):nth-child(-n+8)

Выберет элементы в диапазоне от 3 до 8-ми.

:nth-child(n+4):nth-child(even)

Выберет элементы начиная с 4-го, а потом выделит только четные из них.

:nth-child(3n+1):nth-child(even)

Выберет 1-й, 4-й, 7-й и 10-й элементы, а затем только четные из них.

:nth-child(n+3):nth-child(-n+8):nth-child(even)

Выберет элементы с 3-го по 8-й, а затем только четные из них.

nth-of-type()

Все примеры выше сделаны на основе однородного списка, но что если нам требуется выбрать, например, несколько абзацев в статье, которая содержит не только абзацы, но и заголовки?

Предположим, мы хотим покрасить нечетные абзацы, поэтому напишем что-то вроде:

но результат будет каким-то странным (слева), и если попробовать написать то же самое, но без тега (справа) — сразу становится ясно почему:

:nth-child считает все элементы, не обращая внимания на тег, хотя показывает только те, что соответствуют заданному тегу или классу.

Чтобы выбрать только абзацы, нам потребуется другой селектор — :nth-of-type:

:nth-of-type работает также, как :nth-child, но считает только элементы заданного типа.

:nth-child удобно использовать в сочетании с Sass:

С помощью :nth-child одинаковым элементам списка заданы разноцветные рамки и разные фоновые картинки.

Используя широкие возможности этих технологий можно делать не только забавные галереи с котятами, но и прочие нарядные штуки разной степени бесполезности (нажмите Rerun, если анимация застыла):

Здесь с помощью :nth-child элементам списка помимо разноцветных градиентов задаются также задержки воспроизведения анимации, из-за чего фигуры движутся не все вместе, а волнами.

:nth-child — полезный селектор, который поможет добавить разнообразия однотипным элементам сайта и тем самым без особых усилий сделает страницу интереснее для визуального восприятия.

css :nth-child(): после — CodeRoad

Можно ли смешать :nth-child() и after ?

У меня есть <ol> элементов, и я хочу добавить немного текста :after . Это прекрасно работает, но тогда я хотел бы иметь другой текст на 1-м, 2-м и 3-м пунктах, а затем на 4-м, 5-м и 6-м тоже.

С приведенным ниже кодом я заканчиваю тем, что каждый li имеет ‘large’ в розовом цвете после него.

Это не имеет смысла для меня, однако я новичок в этом nth-child malarky.

data.html

<ol>
    <li>
        <p>Bacon</p>
    </li>
    <li>
        <p>Bacon</p>
    </li>
    <li>
        <p>Bacon</p>
    </li>

    <!.. repeats -->

    <li>
        <p>Bacon</p>
    </li>
</ol>

pretty.css

#id li p:after {
    float: right;
    content: 'nom';
}

#id li p:nth-child(1):after,
#id li p:nth-child(2):after,
#id li p:nth-child(3):after {
    content: 'OM';
    color: pink;
}

#id li p:nth-child(4):after,
#id li p:nth-child(5):after,
#id li p:nth-child(6):after {
    content: 'Nom';
    color: blue;
}

Мне бы очень не хотелось делать это с js, так как это просто «хорошая функция».

Я беспокоюсь только о новых браузерах, поэтому нет необходимости в обходных путях для oldIE и т. д.

html css css-selectors
Поделиться Источник rockingskier 19 декабря 2012 в 17:07
3 ответа
использование nth-child (n) с scss и &:nth-child для предоставления детям различных классов
Я пытаюсь делать какие-то художественные вещи, я просто раскрашиваю дивы и делаю из них линии. Сначала я делал это так <a href=’#’></a> и стайлинг через [href*=’#’] { &:after { ..css} &:after { ..css} &:after { ..css} } но оказывается, что вы не можете использовать более 2…
CSS селектор nth-child
Я столкнулся с проблемами при написании немного сложного селектора CSS. Я хочу выбрать div с class, содержащим ‘btn-group’ , но не ‘open’ Так что у меня есть что-то вроде; div[class*=’btn-group’]:not([class=’open’]) Теперь проблема заключается в том, что существует около 5-6 элементов, которые…

35

Вы можете, но вы делаете это неправильно..
Проблема в том, что все ваши p элементов находятся внутри li . Таким образом, все они являются первым ребенком своего контейнера li .
Вам нужно будет поместить nth-child на элементы li .
#id li:nth-child(1) p:after, #id li:nth-child(2) p:after, #id li:nth-child(3) p:after { content: 'OM'; color: pink; } #id li:nth-child(4) p:after, #id li:nth-child(5) p:after, #id li:nth-child(6) p:after { content: 'Nom'; color: blue; }
Цитирование документации W3C
Обозначение псевдокласса :nth-child(an+b) представляет элемент, который имеет+b-1 братьев и сестер перед ним в дереве документов для любого положительного целого числа или нулевого значения n и имеет родительский элемент.
Обновление 1
Вы также можете упростить это с помощью
#id li:nth-child(-n+3) p:after { content: 'OM'; color: pink; } #id li:nth-last-child(-n+3) p:after { /*this means last 3*/ content: 'Nom'; color: blue; }
Демо-версия на http://jsfiddle.net/gaby/4h5AS/2/
Обновление 2
Если вы хотите, чтобы только первые шесть были разными ( а не первые 3 и последние 3 ), Вы могли бы
#id li:nth-child(-n+6) p:after { /*this means first 6*/ content: 'Nom'; color: blue; } #id li:nth-child(-n+3) p:after {/*this means first 3 and since it comes second it has precedence over the previous for the common elements*/ content: 'OM'; color: pink; }
Демо-версия на http://jsfiddle.net/gaby/4h5AS/3/
Поделиться Gabriele Petrioli 19 декабря 2012 в 17:10

7

Должно быть сделано вот так:
#id li:nth-child(1) p:after, #id li:nth-child(2) p:after, #id li:nth-child(3) p:after { content: 'OM'; color: pink; } #id li:nth-child(4) p:after, #id li:nth-child(5) p:after, #id li:nth-child(6) p:after { content: 'Nom'; color: blue; }
JS Fiddle
. … as <p> всегда является первым дочерним элементом <li> в показанной структуре HTML.
Обратите внимание, однако, что правило content: 'nom'; в самом первом определении стиля было перезаписано (но правило ‘float’ осталось в силе): это то же самое каскадное правило для псевдоэлемента ‘:after’, что и для других. )
Поделиться raina77ow 19 декабря 2012 в 17:10

0

Вы можете комбинировать psudeos вот так…
#id li:nth-child(1)::before { border-left-color: red; } #id li:nth-child(2)::before { border-left-color: white; } #id li:nth-child(3)::before { border-left-color: blue; }
Поделиться Gerd 26 мая 2020 в 21:16
css селектор :nth-child (четный|нечетный) vs: nth-child(int)
У меня есть следующая проблема с псевдо-селектором CSS :nth-child , и я почти уверен, что что-то упустил. index.html <html> <head>…</head> <body> <div>first</div> <div>second</div> <div…
Как использовать: nth-last-child в IE8?
У меня есть этот CSS ниже, но он не работает на IE8. Я знаю, что CSS3 не работает на IE8. Я хотел бы попробовать что-то вроде div:first-child + div + div , но это не работает. Я думаю, что это не работает из-за nth-last-child() . Я не могу перевести nth-last-child() с помощью смежного родственного…
Похожие вопросы:

nth-Child CSS селекторы
У меня есть девять наборов цветовых схем, которые я хочу применить к последовательности divs. Использование :nth-child(1), :nth-child(2)… работает для первых девяти, но я бы хотел, чтобы…

css nth-child(2n+1) перекрасить css после фильтрации элементов списка
У меня есть список из 20 + пунктов. Цвет фона изменяется с помощью селектора :nth-child(2n+1). четный предмет черный, нечетный предмет белый). Когда я нажимаю кнопку, чтобы отфильтровать…

От JQuery до css напишите nth-child()
поэтому мне нужно сделать слайдер для школы. Я знаю, что могу использовать что-то вроде .sliders img:nth-child(Index) {} Я знаю, что это должно быть похоже $(.sliders img).css……… Мой вопрос…

использование nth-child (n) с scss и &:nth-child для предоставления детям различных классов
Я пытаюсь делать какие-то художественные вещи, я просто раскрашиваю дивы и делаю из них линии. Сначала я делал это так <a href=’#’></a> и стайлинг через [href*=’#’] { &:after {…

CSS селектор nth-child
Я столкнулся с проблемами при написании немного сложного селектора CSS. Я хочу выбрать div с class, содержащим ‘btn-group’ , но не ‘open’ Так что у меня есть что-то вроде;…

css селектор :nth-child (четный|нечетный) vs: nth-child(int)
У меня есть следующая проблема с псевдо-селектором CSS :nth-child , и я почти уверен, что что-то упустил. index.html <html> <head>…</head> <body> <div…

Как использовать: nth-last-child в IE8?
У меня есть этот CSS ниже, но он не работает на IE8. Я знаю, что CSS3 не работает на IE8. Я хотел бы попробовать что-то вроде div:first-child + div + div , но это не работает. Я думаю, что это не…

css nth-child или nth-of-type issue
Проблема в том, что news4 div имеет ширину 30%. Это должно быть 50%. похоже, что nth-of-type также считается .advertisement div и news4 div становится пятым дочерним элементом. То же самое с…

CSS nth-child (n) не отвечает после добавления jQuery
мой псевдо-элемент nth-child() не работает с этими элементами. Он отлично работает на JSFiddle с скомпилированным CSS, но не с SCSS. На моей машине он не работает ни с CSS, ни с SCSS. Обратите также…

nth-child (2n) CSS после скрытого tr
У меня есть таблица, похожая на эту (ниже) после использования css nth-child(2n). tr:nth-child(2n) {background-color: #f0f3f5;} После выполнения некоторых скрытых на vID, ID, MO_Sub tr <tr…
Css. Разница между :nth-child и :nth-of-type (:last-child и :last-of-type)
Использование псевдоклассов в css очень удобно. Применение, в частности, :nth-child, :nth-of-type, :last-child,:last-of-type позволяют сделать разметку более гибкой и легкой, зачастую позволяя избежать использования лишних классов.
Но часто бывает не понятна разница между интуитивно схожими формулировками, например, last-child и last-of-type.
Давайте разберем на примере :nth-child и :nth-of-type.
К примеру есть вот такая разметка:
<div> <p>Привет</p> <p>Пользователь</p> <!— Нужно получить этот элемент —> </div>

<div>
   <p>Привет</p>
   <p>Пользователь</p>    <!— Нужно получить этот элемент —>
</div>

Чтобы выделить цветом нужный нам элемент подойдут ОБА следующих правила:
p:nth-child(2) { color: red; } p:nth-of-type(2) { color: red; }

p:nth-child(2) { color: red; }
p:nth-of-type(2) { color: red; }

Оба правила получают доступ к второму элементу.
Разницу между элементами мы сможем ощутить, разобрав следующий вариант — например, у нас изменилась структура страницы.
<div> <h2>Кабинет</h2> <p>Привет</p> <p>Пользователь</p> <!— Нужно, по прежнему, получить этот элемент —> </div>

<div>
   <h2>Кабинет</h2>
   <p>Привет</p>
   <p>Пользователь</p>    <!— Нужно, по прежнему, получить этот элемент —>
</div>

Если к новой верстке применить это правило:
p:nth-child(2) { color: red; }

p:nth-child(2) { color: red; }

.. в результате подсветится слово Привет. Почему?
Потому что:
— это второй элемент в родительском элементе
— это действитель параграф.
Второе же правило:
p:nth-of-type(2) { color: red; }

p:nth-of-type(2) { color: red; }

.. будет работать по-прежнему верно.
Причина этому — то, что nth-of-type ищет именно второй параграф, а не любой второй элемент, после этого проверяя, является он параграфом или нет
Тема простая, но не очень легко понимаемая с первого раза. Надеюсь объяснил все понятно. 🙂
Похожие записи

Разукрашиваем таблицу
В CSS3 появились удобные средства для улучшения стилевых таблиц печати и разбиения контента на столбцы.
:nth-of-type [p:nth-of-type(2n+l){color: red;}] — Поиск всех элементов определенного типа.
:first-child [р: first-child{ color: blue;}] — Поиск первого дочернего элемента.
:nth-child [p:nth-child(2n+l){color: red;}] — Поиск заданного дочернего элемента в прямом направлении (от начала к концу).
:last-child [p:last-child{color:blue;}] — Поиск последнего дочернего элемента.
:nth-last-child [p:nth-last-child(2){color: red;}] — Поиск заданного дочернего элемента в обратном направлении.
:first-of-type [p:first-of-type{color:blue;}] — Поиск первого элемента заданного типа.
:last-of-type [р:last-of-type{color:blue;}] — Поиск последнего элемента заданного типа.
Поддержка столбцов
[#content{ column-count: 2; column-gap: 20рх; column-rule: lpx solid #ddccb5; }] — Разбиение области контента на несколько столбцов.
:after [span.weight:after { content: «lbs»; color: #bbb; }] — Используется с content для вставки контента после заданного элемента.
[media=»only all and (max-width: 480)»] — Применение стилей в зависимости от параметров устройства.
Создадим простую таблицу без стилей. Она будет выглядеть так.
Название Цена Количество Итого
Кружка $10.00 5 $50.00
Рубашка $20.00 5 $100.00
Ножницы $9.00 4 $36.00
Промежуточный итог $186.00
Доставка $12.00
Всего $198.00
Зебра (:nth-of-type)
Эффект зебры (чередование цвета строк) полезен тем, что упрощает просмотр данных по строкам. Раньше в строку таблицы приходилось включать дополнительные классы (например, odd и even для нечетных и четных строк соответственно). При помощи новых селекторов мы можем добиться желаемого эффекта без изменения разметки.
Селектор nth-of-type находит каждый элемент конкретного типа, определяемый формулой или ключевыми словами. Чтобы каждая вторая строка таблицы была окрашена в другой цвет, проще всего найти все чётные строки таблицы и назначить им другой цвет фона. То же самое делается с нечетными строками. В CSS3 имеются ключевые слова even и odd, предназначенные именно для таких ситуаций. Фактически этот селектор означает: «Найти каждую чётную строку таблицы и задать ее цвет. Затем найти каждую нечётную строку таблицы и задать её цвет».
table{ border-collapse: collapse; width: 600px; } th, td{ border: none; } th{ background-color: #000; color: #fff; } tr:nth-of-type(even){ background-color: #F3F3F3; } tr:nth-of-type(odd){ background-color:#ddd; }
Название Цена Количество Итого
Кружка $10.00 5 $50.00
Рубашка $20.00 5 $100.00
Ножницы $9.00 4 $36.00
Промежуточный итог $186.00
Доставка $12.00
Всего $198.00
Выравнивание текста столбцов (:nth-child)
По умолчанию текст во всех столбцах таблицы выравнивается по левому краю. Мы выровняем по правому краю все столбцы, кроме первого, чтобы цена и количество единиц товара лучше читались. Для этого мы воспользуемся селектором nth-child.
Селектор nth-child ищет дочерние элементы заданного элемента; по аналогии с nth-of-type, он может использовать ключевые слова или формулу. Формула определяется в виде an + b, где а — множитель, n — счетчик, начинающийся с 0, b — смещение. Принцип использования формул проще понять в контексте; давайте применим его в таблице.
Для выбора всех строк таблицы можно воспользоваться селектором вида:
table tr:nth-child(n)
В этом примере не указан ни множитель, ни смещение.
Все строки таблицы, кроме первой (строка с заголовками столбцов), выбираются при помощи селектора со смещением:
table tr:nth-child(n+2)
Счетчик равен 0, но со смещением 2, отсчёт начинается не от начала таблицы, а со второй строки.
Для выбора каждой второй строки таблицы используется множитель 2:
table tr:nth-child(2n)
Каждая третья строка выбирается при помощи множителя 3n.
Если прибавить к множителю смещение, то поиск будет начинаться не от начала таблицы, а с одной из следующих строк. Следующий селектор находит каждую вторую строку, начиная с четвертой:
table tr :nth-child(2n+4)
Итак, для выравнивания всех столбцов, кроме первого, используется следующая запись:
td:nth-child(n+2), th:nth-child(n+2){ text-align: right; }
Название Цена Количество Итого
Кружка $10.00 5 $50.00
Рубашка $20.00 5 $100.00
Ножницы $9.00 4 $36.00
Промежуточный итог $186.00
Доставка $12.00
Всего $198.00
Последняя строка (:last-child)
Хотите, чтобы нижняя строка выделялась жирным шрифтом? Воспользуемся селектором last-child, который находит последний дочерний элемент группы.
tr:last-child{ font-weight: bolder; }
Выделим также последний столбец таблицы, чтобы суммы строк тоже выделялись на общем фоне:
td:last-child{ font-weight: bolder; }
Наконец, при помощи селектора last-child можно увеличить размер шрифта общей суммы в правом нижнем углу таблицы. Мы находим последний столбец последней строки и изменяем его оформление.
tr:last-child td:last-child{ font-size:24px; }
Название Цена Количество Итого
Кружка $10.00 5 $50.00
Рубашка $20.00 5 $100.00
Ножницы $9.00 4 $36.00
Промежуточный итог $186.00
Доставка $12.00
Всего $198.00
Поиск в обратном направлении (:nth-last-child)
Если стоимость доставки снижена под действием скидки, то соответствующая строка таблицы должна выделяться цветом. Для быстрого поиска этой строки удобно использовать селектор nth-last-child. Вы уже видели, как селектор nth-child и формула аn+b используются для выбора конкретных дочерних элементов. Селектор nth-last-child работает практически так же, если не считать того, что он перебирает дочерние элементы в обратном порядке, начиная с последнего. Это позволяет легко найти предпоследний элемент группы.
Селектор определяет конкретный дочерний элемент — второй с конца.
tr:nth-last-child(2){ color: green; }
В оформление таблицы осталось внести последний штрих. Ранее мы выровняли по правому краю все столбцы, кроме первого. Для строк с опи саниями и ценами товаров такое выравнивание естественно, но последние три строки выглядят немного странно. Для них лучше использовать выравнивание по правому краю. Для решения этой задачи мы используем селектор nth-last-child с отрицательным множителем и положительным смещением.
tr:nth-last-child(-n+3) td{ text-align: right; }
Такая формула реализует интервальный выбор. В ней используется смещение 3, а с селектором nth-last-child выбирается каждый элемент до заданного смещения. Если бы вместо него использовался селектор nth-child, то строки выбирались бы от начала таблицы.
Название Цена Количество Итого
Кружка $10.00 5 $50.00
Рубашка $20.00 5 $100.00
Ножницы $9.00 4 $36.00
Промежуточный итог $186.00
Доставка $12.00
Всего $198.00
Реклама
Решено с помощью CSS! Логическая стилизация на основе числа элементов — CSS-LIVE
Перевод статьи Solved with CSS! Logical Styling Based on the Number of Given Elements с сайта css-tricks.com для CSS-live.ru, автор — Юна Кравец
Эта статья третья из серии про мощь CSS.
Все статьи серии:
А вы знали, что CSS — Тьюринг-полный? А что его можно использовать для вполне серьёзной логической стилизации? Можно-можно! И не нужно закладывать логику для стилевых правил в JavaScript, или навешивать скриптом классы, для которых вы задаете стили. Во многих случаях CSS сам справится с этим. Я до сих пор ежедневно открываю новые CSS-трюки, и этим CSS нравится мне всё больше и больше.
В этом году, я начала работать в издательстве Bustle Digital Group. В СМИ, как и во множестве продуктов, команда разработчиков выстраивает платформу, которая должна подходить для всех практических задач. Наша CMS даёт возможность авторам и редакторам создавать статьи, а также править страницы и управлять вставкой рекламы.
В отличии от работы со статическим сайтом, команда разработчиков не может полностью контролировать данные, поступающие от пользователя, так что удобства для пользователей не достичь без дизайнерских решений и правил управления. Некоторые из таких сценариев, с которыми мы столкнулись в мире цифровых СМИ, подкинули нам настоящие головоломки по части пользовательского интерфейса, которые и вдохновили меня присмотреться к способам их решения на CSS.
Итак, взглянем на некоторые примеры!
Пример 1: бинарные состояния
Часто забытый и весьма полезный селектор — псевдоселектор :empty. Он позволяет оформлять элементы, отталкиваясь от того, есть ли в них контент или нет. Привет пустым состояниям! Пустые состояния — отличный способ «достучаться» до пользователя, «очеловечив» ваше приложение, и это можно сделать прямо из CSS.
В этом примере у нас есть какой-то список от пользователя. Это могут быть статьи, которые пользователь опубликовал (как автор), или сохранил в закладках (как редактор). Применений тут масса. Вместо JavaScript можно использовать псевдоэлементы для вставки изображения, стилей и текста:
Рисунки показывают, как стили применяются или нет в зависимости от того, есть в списке отображаемые элементы или нет.
И решение здесь — всего лишь три строчки кода:
div:empty:after { content: 'Ой, ничего'; }
Можете также добавить псевдоэлемент :before для вставки изображения или любого нужного вам контента. Как альтернатива, можно взять псевдоселектор :not вместе с :empty, сделать правило :not(:empty) и оформить им все непустые элементы, то есть элементы с контентом.
See the Pen Empty States by Максим (@psywalker) on CodePen.
Примечание: этот пример существует только в целях демонстрации этой техники. Нежелательно класть контент в псевдоэлементы по соображениям доступности. Можно использовать тот же прием выбора пустых (:empty) или непустых (:not(:empty)) элементов, чтобы применить к дочерним элементам более доступные для скринридеров стили.
Продвинутый выбор по количеству
Этот пример был неплохой разминкой, но на CSS можно не только проверять, если ли дочерние элементы, но и решать более сложные задачи. В этом нам пригодится псевдоселектор :nth-child! На CSS-Tricks есть отличный инструмент, помогающий тестировать и играть с выборкой :nth-child, и вскоре вы узнаете, что он действительно может пригодиться.
Но прежде давайте выясним, как именно это работает?
Главное в этом коде — вот что, где div обозначает любой элемент, соседей которого мы будем считать, а x — число соседей, при котором стиль должен меняться:
div:first-child:nth-last-child(n + x), div:first-child:nth-last-child(n + x) ~ div
Использование :nth-last-child вместо :nth-child для выбора позволяет нам начать с конца последовательности, а не сначала. При выборе :nth-last-child(n + x) мы выбираем значение с номером x, начиная с конца. Если x = 3, то это выглядело бы так:
Иллюстрация того, как :nth-last-child(3) выбирает третий элемент с конца списка.
Итак, если мы хотим посчитать значения n + 3, мы выбираем все элементы, которые являются 3-м или более чем 3-м с конца. Начиная с n=0 (что будет значить 0 + 3), а 4-й элемент будет первым с конца после третьего. Это выглядит так:
Иллюстрация того, как :nth-last-child(n+3) выбирает все элементы, соответствующие 3 или более 3 с конца.
Начало неплохое, но идея в том, чтобы по условию стилизовать все элементы в зависимости от их количества. Поэтому нужно работать с этими условиями, но выбирать все элементы. Давайте начнём с выбора первого элемента. Нужно создать условие, чтобы увидеть, подходит ли вся выборка для стилизации, и затем начать с этого первого соседнего элемента:
Ой. Сейчас у нас выбран только первый элемент, а нам нужны все элементы. К счастью, для этого можно использовать очень удобный селектор соседних элементов (~).
Если изменить наш последний пример на :first-child:last-child(n + 3) ~ *, то он выберет все элементы, кроме первого, почти как нам нужно.
А теперь можно видеть, что все элементы, следующие за первым, выбираются, но не хватает первого, поэтому здесь понадобятся два селектора, и следовательно итог такой:
Сочетание обоих предыдущих примеров выберет все элементы в списке.
Пример 2: форматирование списка
Допустим, вы хотите указать в статье список благодарностей тем, кто участвовал в ее создании. Для этого как раз есть немного места, и у большинства статей таких благодарностей будет немного, но попадаются исключения, над которыми пришлось изрядно потрудиться множеству людей.Мы хотим обеспечить, чтобы и те, и другие хорошо смотрелись с помощью одного CSS.
План таков: если благодарностей не более четырёх, то выводим их в виде маркированного списка. Пусть они выстраиваются по вертикали. Как только благодарностей станет больше четырёх, будем выводить их по горизонтали через точку с запятой, чтобы список не казался читателю слишком громоздким. В конце концов это же небольшой блок с благодарностями.
Иллюстрации вертикального неупорядоченного списка (слева) и горизонтального списка, разделённого точкой с запятой (справа)
Можно проверить число доступных элементов и застилизовать их как блочные, пока не упрёмся в предел. В этот момент мы перейдём к строчному оформлению, добавив псевдоэлемент для визуального разбиения данных.
/* 5 или более элементов отображаются друг за другом */ li:first-child:nth-last-child(n + 5), li:first-child:nth-last-child(n + 5) ~ li { display: inline; } /* Добавляем точку с запятой после каждого элемента кроме последнего */ li:first-child:nth-last-child(n + 5) ~ li::before { content: ';'; margin: 0 0.5em 0 -0.75em; }
:nth-first-child:nth-last-child(n + 5) позволяет сообщить: «начни с первого дочернего элемента и примени стили к нему и к элементам, следующим за ним, если их пять и более». Запутанно? Нуу, это работает.
li:first-child:nth-last-child(n + 5) выбирает первый элемент списка, а li:first-child:nth-last-child(n + 5) ~ li — каждый элемент, следующий за первым.
See the Pen RYWoZY by Максим (@psywalker) on CodePen.
Пример 3: карусель с условием
Давайте с помощью этой техники сделаем карусель отзывчивой. На большом экране она должна центрироваться посередине страницы, когда она содержит три элемента. Но когда элементов достаточно, чтобы заполнить экран по горизонтали, то выровним её по левому краю, чтобы пользователь мог листать (свайпить) её.
Иллюстрация карусели с тремя элементами (слева) и с четырьмя и более (справа)
Вот что тут можно сделать: растянуть элементы и заполнить ими весь экран, если их не так много, чтобы случилось переполнение. А если переполнение случится, давайте используем его на всю катушку и покажем все возможности карусели, показав стрелками, что ее можно скроллить, и увеличив отступы между элементами. Поверх этого, давайте добавим с краю кнопку со стрелкой, показав, что можно скроллить все элементы и привязать JavaScript-события, чтобы заставить карусель скроллиться.
Мы можем воспользоваться тем же самым приёмом, что в предыдущем примере, но нам ещё понадобится один лишь first-child, чтобы найти и отобразить в интерфейсе div со стрелкой. HTML выглядел бы так:
<ul> <li> <div>1</div> </li> <li> <div>2</div> </li> ... <button>——></button> </ul>
Пустые элементы в DOM — не идельно, но смотрите. Это по-прежнему умный хак. Мы применим к кнопке .arrow visibility: hidden, сделав её невидимой для DOM и скринридеров, если условия не применяются (если элементов четыре или более). В противном случае мы отобразим её с помощью display: block, применим к ней стили и нужное позиционирование.
li:first-child:nth-last-child(n + 5) ~ .arrow { display: block; position: sticky; ... }
See the Pen Box Alignment by Максим (@psywalker) on CodePen.

Больше информации!
При исследовании данного материала я нашла отличную статью Хейдона Пикеринга по этой теме, названную «Количественные выражения», и ещё примеры Лии Веру! В комментариях к статье Хейдона Пол Айриш отмечает, что это более медленный способ выборки элементов, так что используйте его с осторожностью.
P.S. Это тоже может быть интересно:
Псевдокласс nth-child — n-ный потомок родителя
Псевдокласс nth-child выбирает элемент, который является n-ным потомком родителя.
Синтаксис
селектор:nth-child(число | odd | even | выражение) { }
Значения
Значение Описание
число Положительное число начиная с 1. Задает номер элемента, к которому мы хотим обратиться. Нумерация элементов начинается с 1.
odd Нечетные элементы.
even Четные элементы.
выражение Можно составлять специальные выражения с буквой n, которая обозначает все целые числа от нуля (не от единицы!) до бесконечности. Так, 2n — значит все четные числа (начиная со второго).
Как это понять? Подставляем в n последовательно числа от 0 и так далее: если n = 0, то 2n даст 0 — такого элемента нет (нумерация элементов с 1!), если n = 1, то 2n даст 2 — второй элемент, если n = 2, 2n дает 4 — четвертый элемент. Если написать 3n — это будет каждый третий элемент (начиная с третьего!), и так далее.
Пример
В данном примере мы сделаем красного цвета тот li, который является 4-тым потомком своего родителя (4-тым внутри ol):
<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> li:nth-child(4) { color: red; }
:
Пример
Сейчас красными сделаем все четные li:
<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> li:nth-child(even) { color: red; }
:
Пример
Сейчас красными сделаем все нечетные li:
<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> li:nth-child(odd) { color: red; }
:
Пример
Сейчас красными сделаем каждую третью li (начиная с третьей):
<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul> li:nth-child(3n) { color: red; }
:
Пример
В селекторе можно указать диапазон элементов. Допустим, у вас есть список из 20 элементов и нужно выбрать элементы с 7 по 14 включительно. Это можно сделать вот так:
<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> li:nth-child(n+7):nth-child(-n+14) { color: red; }
:
CSS: селектор nth-of-type ()

Пример
Укажите цвет фона для каждого элемента
, который является вторым элементом p. своего родителя:
p: n-й тип (2) {
фон: красный;
}
Попробуй сам »
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Селектор : nth-of-type ( n ) соответствует каждому элементу, который является n -м дочерним элементом определенного типа его родитель.
n может быть числом, ключевым словом или формулой.
Совет: Посмотрите на селектор: nth-child () для выбора элемента, который является n -м потомком, независимо от тип своего родителя.
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую селектор.
Селектор
: nth-of-type () 4.0 9,0 3,5 3,2 9,6
Синтаксис CSS
: nth-of-type ( номер ) {
объявления css ;
} Демо
Другие примеры
Пример
Четные и нечетные ключевые слова, которые могут использоваться для сопоставления дочерних элементов, индекс которых нечетное или четное (индекс первого потомка равен 1).
Здесь мы указываем два разных цвета фона для нечетных и четных элементов p:
p: n-й тип (нечетный) {
фон: красный;
}
p: nth-of-type (четное) {
фон: синий;
}
Попробуй сам »
Пример
По формуле ( и + b ).Описание: a представляет собой размер цикла, n — счетчик (начинается с 0), а b — значение смещения.
Здесь мы указываем цвет фона для всех элементов p, индекс которых равен кратно 3:
p: n-й тип (3n + 0) {
фон: красный;
}
Попробуй сам »
: nth-ребенок | CSS-уловки
Селектор : nth-child позволяет выбрать один или несколько элементов на основе их исходного порядка в соответствии с формулой.
/ * Выбрать первый элемент списка * / li: nth-child (1) {} / * Выбираем 5-й элемент списка * / li: nth-child (5) {} / * Выбираем все остальные элементы списка, начиная с первого * / li: nth-child (нечетный) {} / * Выбираем каждый третий элемент списка, начиная с первого * / li: nth-child (3n - 2) {} / * Выбираем каждый третий элемент списка, начиная со второго * / li: nth-child (3n - 1) {} / * Выбираем каждый третий дочерний элемент, если он имеет класс "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 :
: 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 который _также_ соответствует: nth-child (-n + 3) * / }
Это может немного запутать, поэтому пример может помочь проиллюстрировать разницу:
Браузер поддерживает фильтр «of» очень ограниченно: на момент написания этой статьи только Safari поддерживал синтаксис. Чтобы проверить статус вашего любимого браузера, вот открытые вопросы, связанные с : 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 — он может выбрать любой родственный элемент в расположении, а не только элементы , указанные перед двоеточием .
Сопутствующие объекты
Прочие ресурсы
Поддержка браузера
Хром Safari Firefox Opera IE Android iOS
Любая 3.2+ Любые 9,5+ 9+ Любые Любые
: nth-child был представлен в модуле CSS Selectors Module 3, что означает, что старые версии браузеров не поддерживают его. Однако поддержка современных браузеров безупречна, а новые псевдоселекторы широко используются в производственных средах. Если вам требуется поддержка старых версий браузера, используйте polyfill для IE или используйте эти селекторы некритическими способами, например, с прогрессивным улучшением, что рекомендуется.
: nth-of-type | CSS-уловки
Селектор : nth-of-type позволяет выбрать один или несколько элементов на основе их исходного порядка в соответствии с формулой. Он определен в спецификации CSS Selectors Level 3 как «структурный псевдокласс», что означает, что он используется для стилизации контента на основе его отношений с родительскими и родственными элементами.
Предположим, что у нас есть неупорядоченный список, и мы хотим «зебра-полоса» чередовать элементы списка:
Первый элемент Второй элемент Третий пункт Четвертый пункт Пятый пункт
Вместо добавления классов к каждому элементу списка (например, .даже и .odd ) мы можем использовать : nth-of-type :
li { фон: slategrey; } / * выбираем чередующиеся элементы, начиная со второго * / li: nth-of-type (2n) { фон: lightslategrey; }
Как видите, : nth-of-type принимает аргумент: это может быть одно целое число, ключевые слова «четный» или «нечетный» или формула, как показано выше. Если указано целое число, выбирается только один элемент, но ключевые слова или формула будут перебирать все дочерние элементы родительского элемента и выбирать соответствующие элементы — аналогично навигации по элементам в массиве в JavaScript.Ключевые слова «четный» и «нечетный» просты, но формула построена с использованием синтаксиса an + b , где:
«a» — целое число
«n» — буквальная буква «n»
«+» является оператором и может быть «+» или «-»
«b» является целым числом и требуется, если в формулу включен оператор
Важно отметить, что эта формула представляет собой уравнение и проходит через каждый родственный элемент, определяя, какой из них будет выбран.Часть формулы «n», если она присутствует, представляет собой набор возрастающих положительных целых чисел (точно так же, как итерация по массиву). В нашем примере выше мы выбрали каждый второй элемент с формулой 2n , которая работала, потому что каждый раз, когда элемент проверялся, «n» увеличивалось на единицу (2 × 0, 2 × 1, 2 × 2, 2 × 3, так далее). Если порядок элементов соответствует результату уравнения, он будет выбран (2, 4, 6 и т. Д.). Для более подробного объяснения используемых математических вычислений, пожалуйста, прочтите эту статью.
Для дальнейшей иллюстрации, вот несколько примеров действительных селекторов : nth-of-type :
Оцените эту ручку!
К счастью, не всегда приходится делать математику самостоятельно — существует несколько : nth-of-type тестеров и генераторов:
Достопримечательности
: nth-of-type выполняет итерацию по элементам, начиная с вершины исходного порядка.Единственная разница между ним и : nth-last-of-type заключается в том, что последний выполняет итерацию по элементам , начиная с нижней части исходного порядка .
Селектор : nth-of-type очень похож на : nth-child , но с одним критическим отличием : он более конкретен. В нашем примере выше они дадут тот же результат, потому что мы перебираем только li элементов, но если бы мы перебирали более сложную группу братьев и сестер, : nth-child попытался бы сопоставить всех братьев и сестер, а не только братьев и сестер. того же типа элемента.Это раскрывает мощь : nth-of-type — он нацелен на конкретный тип элемента в расположении по отношению к аналогичным братьям и сестрам, а не ко всем братьям и сестрам .
Сопутствующие объекты
Прочие ресурсы
Поддержка браузера
Хром Safari Firefox Opera IE Android iOS
Завод 3.2+ Работает 9,5+ 9+ Работает Работает
: nth-of-type был представлен в модуле CSS Selectors Module 3, что означает, что старые версии браузеров не поддерживают его. Однако поддержка современных браузеров безупречна, а новые псевдоселекторы широко используются в производственных средах. Если вам требуется поддержка старых версий браузера, используйте polyfill для IE или используйте эти селекторы некритическими способами, например, с прогрессивным улучшением, что рекомендуется.
CSS | : Селектор nth-of-type () — GeeksforGeeks
CSS | : nth-of-type () Selector
: nth-of-type () в css Selector используется для стилизации только тех элементов, которые являются n-м номером дочернего элемента его родительского элемента. N может быть числом, ключевым словом или формулой.
Синтаксис:
: nth-of-type (число) { // Свойство CSS; }
Где число — аргумент, представляющий шаблон для сопоставления элементов.Он может быть нечетным, четным или в функциональном обозначении.
odd: Представляет элементы, положение которых нечетное в серии: 1, 3, 5 и т. Д., Считая с конца.
четный: Он представляет элементы, положение которых четное в ряду: 2, 4, 6 и т. Д., Считая с конца.
функциональная нотация (): Представляет элементы, положение братьев и сестер которых соответствует шаблону An + B, для каждого положительного целого или нулевого значения n. Индекс первого элемента, считая с конца, равен 1.
Пример-1:
7>
< центр >
< h2 > GeeksForGeeks h2 >
< h3 >: nth -type () Селектор h3 >
< p класс = "geeksFORGEEKS" > geeksforgeeks div >
< p class = "forgeeks" > Портал информатики для г вундеркинды. div >
< p class = "geeks" > Размещение Судо. p >
< p class = "SUDO" > СТЕНДЫ GFG ДЛЯ GEEKSFORGEEKS. p >

кузов >

html >

< html >

<17
<17 900 < стиль >
h2 {
цвет: зеленый;
размер шрифта: 35 пикселей;
}

p: nth-of-type (2) {
фон: зеленый;
цвет: белый;
начертание шрифта: полужирный;
ширина: 70%;
}
стиль >
головка >

< корпус
Вывод:
Пример 2: В этом примере каждый нечетный и четный элемент выбирается с помощью нечетного или даже ключевое слово в качестве аргумента. 7> < центр > < h2 > GeeksForGeeks h2 > < h3 >: nth -type () Селектор h3 > < p класс = "geeksFORGEEKS" > geeksforgeeks div > < p class = "forgeeks" > Портал информатики для г вундеркинды. div > < p class = "geeks" > Размещение Судо. p > < p class = "SUDO" > СТЕНДЫ GFG ДЛЯ GEEKSFORGEEKS. p > корпус > html > < html > < головка > > 17 17 > h2 { цвет: зеленый; размер шрифта: 35 пикселей; } p: nth-of-type (нечетный) { фон: зеленый; цвет: белый; начертание шрифта: полужирный; ширина: 70%; } p: nth-of-type (четный) { фон: красный; цвет: белый; начертание шрифта: полужирный; ширина: 70%; } стиль > головка > < корпус Вывод : Поддерживаемые браузеры: Браузеры, поддерживаемые : nth-of-type () Selector, перечислены ниже: Apple Safari Google Chrome Firefox Opera Internet Explorer CSS: nth-of-class s избиратель - Брам.нас Одна вещь, которая беспокоит меня в селекторах CSS : nth-of-type /: nth-child , заключается в том, что вы не можете комбинировать их с классами CSS. Селектор ниже, например, не будет работать так, как вы сначала ожидали: .bar: nth-child (2) { красный цвет; } Нет, селектор выше не закрасит второй элемент .bar красный , чего я почему-то ожидал. Вместо этого селектор будет нацелен на элемент .бар и : nth-child (2) : См. Pen .class: nth-of-type от Bramus (@bramus) на CodePen. 🐛 Ранее в этой статье ошибочно предполагалось, что браузер каким-то образом узнает, что .bar является элементом article . Это предположение было неверным, и этот пост был изменен, чтобы больше не содержать эту ошибку. Спасибо @simevidas за указание на это. ~ Чтобы решить мою проблему, мне понадобится что-то вроде селектора : nth-of-class .К сожалению, такого селектора не существует и не предлагается. Однако то, что предлагается в предстоящей спецификации селекторов CSS уровня 4 (также известной как «не CSS4» 😜) , является расширением псевдоселекторов nth-child / nth-last-child : возможность добавления дополнительных «of S» в эти селекторы. Нотация псевдокласса : nth-child (An + B [of S]?) представляет элементы, которые входят в число An + Bth элементов из списка, состоящего из их включающих братьев и сестер, которые соответствуют списку селектора S .Если S опущено, по умолчанию используется * | * . Учитывая это, наш желаемый селектор : nth-of-class становится реальностью: article: nth-child (2 of .bar) { красный цвет; } Вот ручка с результатом: См. Pen .class: nth-of-type от Bramus (@bramus) на CodePen. Если вы используете Firefox или Chrome, вы увидите, что указанная выше демонстрация не работает, так как она плохо поддерживается браузером. На момент написания только Safari поддерживает его. 💡 Выше показано динамическое изображение CanIUse.com с постоянно обновляемой таблицей поддержки. К тому времени, когда вы начнете читать этот браузер, поддержка может стать лучше. Другой браузер, который в настоящее время не поддерживает его, имеет мета-проблемы для реализации селекторов CSS уровня 4: Пожалуйста, проголосуйте за упомянутые выше ошибки, если вы хотите, чтобы эти функции присутствовали в браузерах. 🗳 Путем массового голосования за ошибки браузера мы можем «сказать» поставщику браузера, что мы хотели бы увидеть определенную функцию.Идите и голосуйте. ~ Введение в селектор CSS nth-child | Мэтью Кроак odd Используя nth-child (odd) , вы можете применить CSS к каждому нечетному дочернему элементу. Если бы вы переписали приведенный выше CSS, чтобы повлиять на каждый нечетный элемент, тег p для Келли, Стэнли, Майкла и т. Д. Стал бы красным. даже И наоборот, nth-child (even) применит CSS к Creed, Oscar, Jim и т. Д. formula ( an + b ) В дополнение к значению n может быть любым числом, вы также можете использовать формулу. nth-child (3n) повлияет на каждый третий дочерний элемент. nth-child (3n + 1) будет применяться к каждому третьему элементу, начиная с первого. Умножение и деление не поддерживаются в формулах nth-child (n) . Давайте разберем этот формат формулы и посмотрим, что означает каждая часть для nth-child . a представляет размер цикла. Если a равно 3, это означает, что CSS применяется к каждому третьему элементу. См. Ниже p: nth-child (3n) . n - это счетчик, используемый для определения того, какой из дочерних элементов в группе затронут. Сам по себе он относится к каждому дочернему элементу. p: nth-child (n) будет выбирать каждые p . Это немного избыточно, так как вы можете просто использовать p отдельно. b представляет значение смещения. Если вы посмотрите на предыдущий пример nth-child (3n + 1) , CSS будет применяться к каждому третьему элементу, изначально смещенному на единицу.Таким образом, для p: nth-child (3n + 1) будет затронут первый тег p , а затем - каждый третий тег. См. ниже. Как видите, затрагивается каждый третий тег p; итерация начинается после первой. Вы также можете использовать вычитание. В nth-child (3n-1) цикл равен 3, а n является счетчиком, что означает, что будет затронут каждый третий тег p . Но когда смещение равно -1, что по сути составляет 3n + (- 1) , вы должны начать свой цикл с одного элемента перед первым тегом p .См. ниже. Каждый третий тег p, начиная со второго из-за смещения -1 Теперь, когда вы понимаете формульную опцию для nth-child , давайте проверим обратную операцию, отрицательный дочерний диапазон . CSS селектор nth-child - javatpoint Этот селектор используется для сопоставления элементов на основе их положения независимо от типа их родителя. n может быть ключевым словом, формулой или числом.Он используется для сопоставления элементов в зависимости от их положения в группе братьев и сестер. Он соответствует каждому элементу, который является n-м дочерним элементом. Синтаксис Ниже приведен синтаксис этого селектора: : nth-child (n) { // Свойство CSS } «n» в круглых скобках - это аргумент, который представляет шаблон для сопоставления элементов. Это может быть функциональная запись, четная или нечетная. Нечетные значения представляют элементы, положение которых нечетное в серии, например 1, 3, 5 и т. Д.Точно так же четные значения представляют элементы, положение которых последовательно, например 2, 4, 6 и т. Д. Функциональная нотация (An + B) : Функциональная нотация представляет те элементы, чье положение братьев и сестер соответствует шаблону An + B , где A - целочисленный размер шага, n - любое положительное целое число, начинающееся с 0, и B - целочисленное смещение. Давайте посмотрим на иллюстрации. Пример1 В этом примере мы используем функциональную нотацию 3n + 4 , которая будет представлять элементы: (3 × 0) +4 = 4, (3 × 1) +4 = 7 и многие другие. CSS: селектор nth-child <стиль> p: nth-child (3n + 4) { фон: желтый; черный цвет; размер шрифта: 30 пикселей; } Привет мир Добро пожаловать в javaTpoint Это не повлияет. Это повлияет. Не влияет. Не влияет. Это повлияет. Проверить это сейчас Пример2 В этом примере мы собираемся использовать нечетные и четные ключевые слова, соответствующие тем элементам, индекс которых является нечетным или четным. Следует отметить, что первый дочерний индекс равен 1. CSS: селектор nth-child <стиль> p: nth-child (even) { фон: желтый; черный цвет; размер шрифта: 30 пикселей; } p: nth-child (odd) { фон: синий; цвет белый; размер шрифта: 20 пикселей; Привет мир Добро пожаловать в javaTpoint Странно Даже Странно Даже Странно Проверить это сейчас .No related posts.

Название	Цена	Количество	Итого
Кружка	$10.00	5	$50.00
Рубашка	$20.00	5	$100.00
Ножницы	$9.00	4	$36.00
Промежуточный итог	$186.00
Доставка	$12.00
Всего	$198.00

Название	Цена	Количество	Итого
Кружка	$10.00	5	$50.00
Рубашка	$20.00	5	$100.00
Ножницы	$9.00	4	$36.00
Промежуточный итог	$186.00
Доставка	$12.00
Всего	$198.00

Название	Цена	Количество	Итого
Кружка	$10.00	5	$50.00
Рубашка	$20.00	5	$100.00
Ножницы	$9.00	4	$36.00
Промежуточный итог	$186.00
Доставка	$12.00
Всего	$198.00

Название	Цена	Количество	Итого
Кружка	$10.00	5	$50.00
Рубашка	$20.00	5	$100.00
Ножницы	$9.00	4	$36.00
Промежуточный итог	$186.00
Доставка	$12.00
Всего	$198.00

Название	Цена	Количество	Итого
Кружка	$10.00	5	$50.00
Рубашка	$20.00	5	$100.00
Ножницы	$9.00	4	$36.00
Промежуточный итог	$186.00
Доставка	$12.00
Всего	$198.00

Значение	Описание
число	Положительное число начиная с 1. Задает номер элемента, к которому мы хотим обратиться. Нумерация элементов начинается с 1.
odd	Нечетные элементы.
even	Четные элементы.
выражение	Можно составлять специальные выражения с буквой n, которая обозначает все целые числа от нуля (не от единицы!) до бесконечности. Так, 2n — значит все четные числа (начиная со второго). Как это понять? Подставляем в n последовательно числа от 0 и так далее: если n = 0, то 2n даст 0 — такого элемента нет (нумерация элементов с 1!), если n = 1, то 2n даст 2 — второй элемент, если n = 2, 2n дает 4 — четвертый элемент. Если написать 3n — это будет каждый третий элемент (начиная с третьего!), и так далее.