Nt child: :nth-of-type - CSS

Содержание

Псевдокласс :nth-of-type | htmlbook.ru

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9.0+	1.0+	9.6+	3.1+	3.6+	2.1+	2.0+

Краткая информация

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

элемент:nth-of-type(odd | even | <число> | <выражение>) {…}

Значения

odd: Все нечетные номера элементов.
even: Все четные номера элементов.
число: Порядковый номер указанного элемента. Нумерация начинается с 1, это будет первый элемент в списке.
выражение: Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2…

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

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

В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.

Табл. 1. Результат для различных значений псевдокласса
Значение	Номера элементов	Описание
1	1	Первый элемент.
5	5	Пятый элемент.
2n	2, 4, 6, 8, 10	Все четные элементы, аналог значения even.
2n+1	1, 3, 5, 7, 9	Все нечетные элементы, аналог значения odd.
3n+2	2, 5, 8, 11, 14	—
-n+3	3, 2, 1	—
5n-2	3, 8, 13, 18, 23	—
even	2, 4, 6, 8, 10	Все четные элементы.
odd	1, 3, 5, 7, 9	Все нечетные элементы.

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>nth-of-type</title>
  <style>
   img:nth-of-type(2n+1) { float: left; }
   img:nth-of-type(2n) { float: right; }
  </style>
 </head>
 <body>
  <p><img src="images/left. gif" alt="">
   <img src="images/right.gif" alt=""></p>
   <h2>Исторический турнир</h2>
 </body>
</html>

В данном примере нечётные картинки выравниваются по левому краю окна, а чётные картинки по правому (рис. 1).

Рис. 1. Применение псевдокласса :nth-of-type к изображениям

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 — полезный селектор, который поможет добавить разнообразия однотипным элементам сайта и тем самым без особых усилий сделает страницу интереснее для визуального восприятия.

: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 — 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 Flexbox с помощью order и :nth-child() | by Stas Bagretsov

Эта статья показывает то, как сделать плиточную раскладку на CSS Flexbox, имея под рукой только стандартные возможности CSS и ничего более. Она хороша тем, что показывает подводные камни работы с флексами и даёт понять суть их работы с другого ракурса.

Перевод статьи CSS masonry with flexbox, :nth-child(), and order

👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️

С первого взгляда это кажется довольно простым, взять и создать плиточную раскладку на флексах. Всё, что нужно, это всего лишь выставить flex-flow на column wrap и вуаля, у вас то что нужно. Ну типа того. Проблема с таким подходом в том, что он создает сетку с на вид перетасованным и неясным порядком. Элементы будут отрендерены сверху вниз и люди, смотрящие на сетку слева направо будут читать боксы в примерно таком, довольно произвольном виде, к примеру 1, 3, 6, 2, 4, 7, 8, 5 и так далее и т.п.

У флексов нет простого способа отрендерить элементы в виде колоночной раскладки, используя строчную расстановку элементов, но мы всё же можем сделать плиточную раскладку только на CSS — без JavaScript — используя свойства :nth-child() и order. По сути, это трюк с созданием строчной расстановки элементов, используя flex-direction: column, учитывая то, что мы рендерим 3 колонки:

/*  Рендерим элементы как колонки */
.container {
display: flex;
flex-flow: column wrap;
}/*  Меняем порядок элементов, делая как бы строчную расстановку */
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }
/* Новые колонки разделители */
.container::before,
.container::after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}

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

Давайте разберем проблему (ну или перейдите к её решению в конце статьи или к codepen).

Flexbox по факту не создан для построения плиточных раскладок — если вы выставите фиксированную высотку на флекс-контейнере и flex-flow на column wrap, то у вас получится что-то типа такого:

Тут элементы отрендерены по колонкам сверху вниз, создавая произвольный порядок во время чтения слева направо. Конечно же, это ожидаемый итог и желаемый во многих случаях, но не тогда, когда мы пытаемся создать именно плиточную раскладку. Вы только представьте насколько это дезориентирует читателя, когда страница станет больше в высоту.

Если же мы сменим flex-direction на row, имея элементы с различными высотами, то мы получим правильный порядок, но уже со стрёмными и неожиданными разрывами по все нашей сетке:

Так, что, кажется невозможным воспользоваться преимуществами обоих подходов: получить элементы отрендеренные как колонки, но имеющие строчный порядок. Вы могли прибегнуть к flex-direction: column и просто переставить элементы в HTML, достигнув правильного визуального порядка, но это может быть очень громоздко, к тому же это излишне сложно и создаст неразбериху в логическом порядке при переходах по клавише табуляции (Просто кликая по табу).

Свойство order влияет на порядок элементов в CSS Flexbox или гриде, и мы можем смело использовать его для смены порядка элементов в нашей плиточной раскладке, которая вот вот уже будет сделана как мы хотим. Свойство order довольно простое в использовании: если у вас два элемента и у одного стоит order: 1, а у другого order: 2, то элемент с order: 1 будет орендерен перед другим элементом, вне зависимости от их порядка в HTML исходнике.

В нашем случае, решение зависит от тонкостей спецификации order: что случится, если два или более элементов будут с одинаковым order? Какой из них будет первым? В этом случае, flexbox опирается на исходный код: тот элемент, который идет первым в исходном HTML коде, будет отрендерен перед другим элементом с таким же значением order. Это даёт нам возможность легко перегруппировать элементы в сетке таким образом, что мы сможем сменить порядок расстановки элементов с колоночного на строчный, всё ещё рендеря эти строки, как колонки, используя nth-child().

Посмотрите на табличку ниже. Чтобы получить рациональный порядок с использованием flex-direction: row, нам просто надо отрендерить элементы в стандартном порядке: 1, 2, 3, 4, 5, 6, и т.д.

Но если нам надо получить тот же порядок с использованием flex-direction: column, то тогда уже нам понадобится поменять сам порядок элементов, таким образом, чтобы он соответствовал порядку каждой колонки в таблице (а не каждой строки):

То есть первыми элементами в нашей флексбокс раскладке должны 1, 4, 7, 10. Эти элементы заполнят первую колонку, далее 2, 5, 8, 11 для второй колонки и 3, 6, 9, 12 для третьей и последней колонки. Тут нам на помощь приходит селектор nth-child(). Мы можем его использовать для того, чтобы выделить каждый третий элемент (3n), начиная с первого элемента (3n + 1) и выставить всем этим элементам одинаковое значение order:

.item:nth-child(3n+1) { order: 1; }

Этот селектор выставит order: 1 для элементов 1, 4, 7, 10, то есть всем первым колонкам. Другими словами, мы используем комбинацию nth-child() и order, чтобы изменить порядок элементов на их изначальном положении. Чтобы создать 2 и 3 колонки, мы изменим порядок у других элементов:

.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }

Тут мы делаем три группы элементов: 1, 4, 7, 10 (3n+1) c order: 1, далее 2, 5, 8, 11 (3n+2) с order: 2 и 3, 6, 9, 12 (3). Всё вместе выдаёт нам такой порядок элементов 1, 4, 7, 10, 2, 5, 8, 11, 3, 6, 9, 12.

Такой подход создаст иллюзию того, что элементы вернулись к своему изначальному порядку, как если бы вы рассматривали их в порядке слева направо. Если бы мы визуально оценивали эту сетку по строкам, то первая строка включала бы по первому элементу с каждой группы (1, 2, 3), вторая строка содержала бы каждый второй элемент из каждой группы (4, 5, 6) и так далее и т.п. Используя эту технику мы можем создать плиточную раскладку с элементами, отрендеренными как колонки, но имеющими порядок как было бы в строчном варианте.

А как это влияет на переходы с использованием табов? Да никак. Свойство order меняет только визуальное представление объектов, а не порядок переходов по клавише TAB, так что в этом плане всё будет работать, как и предполагается.

Если у вас довольно много элементов в раскладке, то этот подход 100% приведёт к тому, что что-то пойдет не так. Мы делаем расчёт на то, что каждая “группа”, которую мы создали, будет отрендерена ровно как одна колонка в контейнере, но в реальности у элементов могут быть разные высоты и колонки с лихвой могут сливаться друг с другом. Первая колонка может быть длиннее, чем другие две, для примера, что привело бы к тому, что третья колонка начиналась бы в конце второй:

Подсвеченный элемент (3) должен быть отрендерен в начале третьей колонки или же алгоритм расстановки попросту полетит в тартарары, и если есть место для ещё одного элемента в конце второй колонки, то он само собой будет отрендерен там.

Мы можем пофиксить эту проблему, заставив колонки рестартиться в указанные моменты. Вообще, с флексбоксами нет простого способа для указания “этот элемент должен перейти на новую строку”, но мы можем достигнуть этого эффекта, добавив невидимые элементы, которые возьмут 100% высоты контейнера. Так как они требуют 100% высоты родителя, то они не поместятся в колонку вместе с любым другим элементом, создавая тем самым, переходы на новые строки.

Нам нужно вставить такие переходы в сетку и массив элементов, таким образом, чтобы у нас получилась такая последовательность: 1, 4, 7, 10,<переход>, 2, 5, 8, 11,<переход>, 3, 6, 9, 12. Мы можем использовать псевдоэлементы на контейнере, чтобы добавить такие переходы и мы можем выставить order на 2 обоим. Добавление псевдоэлемента :before, сделает его первым потомком контейнера, а добавление псевдоэлемента :after сделает его последним потомком того же контейнера, так что если мы выставим order: 2 каждому из них, то они станут первым и последним элементом “группы” с order: 2 (так как они находятся до и после других элементов): :before, 2, 5, 8, 11, :after.

/* Новые колонки разделители */
.container::before,
.container::after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}

Я подсветил псевдоэлементы ниже, чтобы показать их эффект. Обратите внимание, что элемент 3 мог бы попасть во вторую колонку, но он отображается как первый элемент в последней:

И в конце вам надо убедиться в том, что ваш флекс-контейнер имеет высоту выше, чем ваша самая высокая колонка (чтобы все колонки поместились). Теперь всё это совместите и так вы сможете сделать настоящую трехколоночную плиточную раскладку (вот codepen).

.container {
display: flex;
flex-flow: column wrap;
align-content: space-between;
/*  Вашему контейнеру нужна фиксированная высота 
*  и он должен быть выше, чем самая высокая колонка. */
height: 600px; 
}.item {
width: 32%;
margin-bottom: 2%; /* Optional */
}
/*  Перегруппировываем элементы в 3 ряда */
.item:nth-child(3n+1) { order: 1; }
. item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }
/* Новые колонки разделители */
.container::before,
.container::after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}

Ваш html должен выглядеть примерно так, где div это каждый элемент в сетке:

<div>
<div></div>
<div></div>
<div></div>
...
</div>

Чтобы создать плиточную раскладку с более, чем тремя колонками, нам надо сделать несколько вещей: адаптировать наш алгоритм сортировки, обновить ширину элементов и вставить переходы на новые строки вручную (вместо использования псевдоэлементов). Для быстрого доступа к конечным результатам я собрал список codepen’ов показывающих плиточную раскладку на флексах для 3, 4, 5 и 6 колонок.

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

<div>
<div></div>
<div></div>
<div></div>
<div></div>
...
<span></span>
<span></span>
<span></span>
</div>

Мы вставляем разделители колонок как span, для того, чтобы отсортировать их в независимости от элементов контента. Нам нужен способ сбросить счет после того, как мы достигнем элемент разделитель или неравномерное число элементов сделает старт первого разделителя после 3 колонки, к примеру. Селектор :nth-of-type выбирает элементы вне зависимости от их типа, так что мы можем разделить порядок элементов и разделители таким образом:

. item:nth-of-type(4n+1) { order: 1; }
.item:nth-of-type(4n+2) { order: 2; }
.item:nth-of-type(4n+3) { order: 3; }
.item:nth-of-type(4n)   { order: 4; }

Разделители же, как и в предыдущем примере, возьмут всю высоту контейнера:

/*  Переход к новой колонке */
.break {
flex-basis: 100%;
width: 0;
margin: 0;
}

В общем, это создаст плиточную колонку с 4-мя колонками (вот codepen):

Вот полное решение для CSS такой плиточной раскладки с 4-мя колонками:

.container {
display: flex;
flex-flow: column wrap;
align-content: space-between;
height: 600px; 
}. item {
width:24%;
margin-bottom: 2%; /* опционально */
}
.item:nth-of-type(4n+1) { order: 1; }
.item:nth-of-type(4n+2) { order: 2; }
.item:nth-of-type(4n+3) { order: 3; }
.item:nth-of-type(4n)   { order: 4; }
.break {
flex-basis: 100%;
width: 0;
margin: 0;
}

Этот способ создания плиточной раскладки только средствами CSS, точно не является самым надежным, гибким или защищенным от внезапных косяков со стороны разработчика, в отличие от такого же исполнения на JavaScript (например Masonry), но если вы не хотите полагаться на сторонние библиотеки только для того, чтобы создать раскладку, то я надеюсь, что эти советы будут вам полезны.

Итерация потомков (nth-child) с использованием SASS

Допустим, у нас есть несколько nth-child элементов, к которым мы хотим применить различную задержку для transition. Можно вручную задать transition delay для каждого элемента, но если у нас 20 элементов, то это будет не удобно, поэтому применим гораздо более эффективный способ. Используя возможности цикла Sass @for, мы можем динамически выбрать каждый элемент и применять различные свойства. Ниже мы рассмотрим соответствующий код и посмотрим на результат.

HTML

<ul>
    <li>Dashboard</li>
    <li>Favorites</li>
    <li>Profile</li>
    <li>Settings</li>
 </ul>

Простой неупорядоченный список, мы собираемся ориентироваться на элементы <li>.

Mixin

@mixin transition {
  @for $i from 1 through 4 {
    &:nth-child(#{$i}) {
      transition: all . 2s #{$i * .1}s ease-in;
    }
  }

Это самая веселая часть! По сути, происходит то, что мы выполняем цикл от 1 до 4 и каждый раз передаем переменную $i в селектор nth-child(). Для каждой итерации цикла мы также присваиваем задержку перехода $i * .1, что дает нам разные значения для каждого дочернего элемента.

SCSS

li {
  @include transition;
}

Здесь мы просто включаем наш миксин в селектор li.

На выходе получим такой CSS:

li:nth-child(1) {
  transition: all 0.2s 0.1s ease-in;
}
li:nth-child(2) {
  transition: all 0.2s 0.2s ease-in;
}
li:nth-child(3) {
  transition: all 0.2s 0.3s ease-in;
}
li:nth-child(4) {
  transition: all 0.2s 0.4s ease-in;
}

Посмотрев на этот вывод, вы получите достаточно четкое представление о том, что на самом деле произошло, когда мы включили миксин.

Работающий пример:

See the Pen Off Canvas Menu by Denis (@deniscreative) on CodePen. 0

Разукрашиваем таблицу

В 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-уловки

Селектор : 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:

  <раздел>
   Один 
   Два 
   Три 
   Четыре 
   Пять

Вместо того, чтобы добавлять класс к каждому четвертому элементу (например,грамм. . Последний ), мы можем использовать : 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 из

)

Существует малоизвестный фильтр, который можно добавить к : 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-child | CSS-уловки

У меня немного кружится голова, когда я сталкиваюсь с идеальным использованием : nth-child или : nth-of-type (прочтите о различиях). Чем лучше вы их поймете, тем больше у вас будет css-ботаников!

В этих простых «рецептах» (на самом деле: выражениях) я произвольно использую плоский список элементов списка и случайно выбранных чисел. Но должно быть достаточно очевидно, как изменить их, чтобы получить аналогичный выбор.

Выберите только пятый элемент

  li: nth-child (5) {
    цвет: зеленый;
}

Чтобы выбрать первый элемент, вы можете использовать: first-child, или, держу пари, вы можете догадаться, как изменить вышеприведенное, чтобы сделать это.

Выбрать все, кроме первых пяти

  li: nth-child (n + 6) {
    цвет: зеленый;
}

Если бы здесь было более 10 элементов, он бы выбрал все из них сверх 5.

Выберите только первые пять

  li: nth-child (-n + 5) {
    цвет: зеленый;
}

Выбрать каждый четвертый, начиная с первого

  li: nth-child (4n-7) {/ * или 4n + 1 * /
    цвет: зеленый;
}

Выбрать только нечетное или четное

  li: nth-child (odd) {
    цвет: зеленый;
}

  li: nth-child (even) {
    цвет: зеленый;
}

Выбрать последний элемент

  li: last-child {
    цвет: зеленый;
}

Выбирает 10-й, потому что здесь 10 элементов, но если бы их было 8, он выбрал бы 8-й, а если бы их было 1290, он бы выбрал 1290-й.

Выбрать второй до последнего элемента

  li: nth-last-child (2) {
    цвет: зеленый;
}

Выбирает 9-й, потому что здесь 10 элементов, но если бы их было 30, он бы выбрал 29-й.

Хочешь поиграть?

Попробуй тестером.

Поддержка браузера

Интересно, что: first-child поддерживался IE 7, но остальная часть этого материала поддерживается только в IE 9. Кроме IE, поддержки браузеров особо не беспокоит, и если вас беспокоит IE, используйте Selectivizr.Если поддержка браузера интересна или важна для вас, обязательно ознакомьтесь с разделом «Когда я могу использовать…», который очень хорошо отслеживает эти вещи.

: nth-child () | Codrops

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

Вы можете передать положительное число в качестве аргумента функции : nth-child () , которая выберет один элемент, индекс внутри его родительского элемента совпадает с аргументом : nth-child () . Например, li: nth-child (3) выберет элемент списка со значением индекса 3 ; то есть он выберет третий элемент списка.

Вы также можете передать одно из двух заранее определенных ключевых слов: , четное, и , нечетное, . li: nth-child (even) выберет все элементы списка с четными индексными номерами (2, 4, 6, 8 и т. Д.), А li: nth-child (odd) выберет все элементы списка с нечетными порядковые номера (1, 3, 5, 7 и т. д.).

: nth-child () также позволяет вам выбирать один или несколько элементов с помощью формулы (или уравнения) — a n + b — которая передается ему в качестве аргумента. Синтаксис: : nth-child ( a n + b ) , где вы заменяете a и b собственными целыми значениями, так что после n заменяется положительными числами (0, 1, 2, 3 и т. Д.), Получившееся число — это индекс элемента, который вы хотите выбрать.Например, : nth-child (3n + 1) выберет 1-го (3 * 0 +1 = 1) ребенка, 4-го (3 * 1 +1 = 4) ребенка, 7-го (3 * 2 +1 = 7 ) ребенок и т. д. и т. д.

Что делает : nth-child ( a n + b ) , так это делит дочерние элементы контейнера на a элементы (последняя группа принимает остаток), а затем выбирает b -й элемент каждой группы. Итак, li: nth-child (3n + 1) разделит элементы списка на 3 группы, поместит остальные элементы в четвертую группу (если количество элементов не делится на 3), и тогда он будет соответствовать первый элемент в каждой группе.

Например, на следующем изображении показан результат выбора li: nth-child (3n + 1) в списке элементов. В списке 10 элементов, и у нас a = 3 , поэтому 10 элементов будут разделены на 3. 10/3 = 3 + 1, поэтому останется один элемент, который будет сгруппирован в последнюю группу. собственное. Затем для каждой из четырех групп будет выбран первый элемент. На следующем изображении соответствующие элементы имеют фон цвета хаки.

Результат применения: nth-child (3n + 1) в списке элементов. Элементы с синим цветом фона выбираются : nth-child (3n + 1) . Элементы разделены на 3 группы (черная рамка), и вы можете видеть, как сопоставляется первый элемент в каждой группе, включая дополнительную группу с остальными элементами.

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

Общая информация и примечания

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

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

li: nth-child (2n + 3) :: after {
    / * здесь стили * /
}

tr: nth-child (даже): hover {
    цвет фона: светло-голубой;
}

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

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

nth-ребенок против nth-of-типа

Селекторы nth-child () и nth-of-type () являются «структурными» псевдоклассами, которые позволяют нам выбирать элементы на основе информации в дереве документа, которая обычно не может быть представлена другие простые селекторы.

В случае nth-child () и nth-of-type () дополнительная информация — это позиция элемента в дереве документа по отношению к его родителю и братьям и сестрам. Хотя эти два псевдокласса очень похожи, они работают по-разному.

Как работает

nth-child ()

Псевдокласс nth-child () используется для сопоставления элемента на основе числа, которое представляет позицию элемента среди его братьев и сестер. Более конкретно, число представляет количество братьев и сестер, которые существуют перед элементом в дереве документа (минус 1).

Это число выражается как функция, an + b , где n — это индекс, а a и b — любые передаваемые нами целые числа.Например, чтобы выбрать каждый элемент, мы могли бы написать любое из следующего —

 : nth-child (1n + 0) {/ * стили * /}
: nth-child (n + 0) {/ * стили * /}
: nth-child (1n) {/ * стили * /}

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

 : nth-child (odd) {/ * стили для нечетных элементов * /}
: nth-child (2n + 1) {/ * стили для нечетных элементов * /}

: nth-child (even) {/ * стили для четных элементов * /}
: nth-child (2n + 0) {/ * стили для четных элементов * /}

При использовании : nth-child () отдельно, достаточно просто предсказать, какой элемент будет выбран. Например, используя эту разметку —

  
 Это  абзац . 
 Это  абзац .
 Это  абзац . 
 Это  разделитель . 
 Это  разделитель .  
 Это  абзац . 
 Это  абзац . 
 Это  разделитель . 
 Это  абзац . 
 Это  разделитель .

Если бы мы хотели выбрать пятый элемент, div, мы могли бы просто написать следующее —

  . example: nth-child (5) {background: # ffdb3a; }

Однако могут возникнуть непредвиденные результаты, если существует несколько типов элементов, и нам нужно объединить псевдокласс : nth-child () с селекторами типа или класса. Например, чтобы снова выбрать тот же самый элемент div, у нас может возникнуть соблазн написать следующее —

 .пример div: nth-child (2) {background: # ffdb3a; }

Примечание — работать не будет

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

Выберите все дочерние элементы . Example
Найдите второй элемент в этом списке, независимо от типа
Проверить, является ли этот элемент типом div

Поскольку второй элемент в дереве документа является абзацем, а не блоком div, ничего не выделяется. Если бы мы хотели выбрать второй элемент div, нам пришлось бы использовать псевдокласс nth-of-type () .

Как работает

nth-of-type ()

Псевдокласс nth-of-type () , например nth-child () , используется для сопоставления элемента на основе числа. Это число, однако, представляет позицию элемента в пределах только тех из его братьев и сестер, которые относятся к тому же типу элемента .

Это число также может быть выражено как функция или с помощью ключевых слов четный или нечетный .Используя пример разметки выше, мы можем выделить все нечетные абзацы, написав —

  .example p: n-й тип (нечетный) {фон: # ffdb3a; }

Когда мы используем этот селектор, пользовательский агент выполняет следующие шаги —

Выберите все дочерние элементы . Example , которые имеют тип p
Создать новый список только из этих элементов
Выберите нечетные числа из этого списка

Из-за этого теперь мы можем выбрать второй div, пятый дочерний элемент . например —

  .example div: nth-of-type (2) {/ * стили * /}

Другие псевдоклассы «nth»

Помимо nth-child () и nth-of-type () , есть ряд других структурных псевдоклассов, которые мы можем использовать для выбора элементов на основе их положения в пределах их братьев и сестер. Подобно nth-child () и nth-of-type () , они делятся на две группы — те, которые не зависят от типа , например nth-child () , и те, которые являются зависящий от типа , например nth-of-type () .

nth-child ()	nth-of-type ()
nth-last-child ()	nth-last-of-type ()
первенец ()	первоклассный ()
последний ребенок ()	последний тип ()
только ребенок ()	только тип ()

Отсчет от конца —

nth-last-child () vs nth-last-of-type ()

Эти псевдоклассы работают как nth-child () и nth-of-type () , но они начинают отсчет с последнего элемента в группе братьев и сестер вместо первого.

  .example: nth-last-child (1) {background: # a6cae7; }
.example p: nth-last-of-type (1) {фон: # ffdb3a; }

Первый элемент —

первый ребенок () против первый ребенок ()

Псевдоклассы first-child () и first-of-type () выбирают первый элемент. Их можно представить как использующие псевдоклассы nth-child () и nth-of-type () , но просто передавая значение 1.

  .example: first-child () {/ * стили * /}
.example: nth-child (1) {/ * стили * /} / * то же, что и выше * /

.example: first-of-type () {/ * стили * /}
.example: nth-of-type (1) {/ * стили * /} / * такие же, как указано выше * /

Последний элемент —

last-child () vs last-of-type ()

Это противоположность псевдоклассам first-child () и first-of-type () . Их можно рассматривать как использование псевдоклассов nth-last-child () и nth-last-of-type () , но с передачей значения 1.

  .example: last-child () {/ * стили * /}
.example: nth-last-child (1) {/ * стили * /} / * такие же, как указано выше * /

.example: last-of-type () {/ * стили * /}
.example: nth-last-of-type (1) {/ * стили * /} / * такие же, как указано выше * /

The Only Element —

only-child () против only-of-type ()

Наконец, эти псевдоклассы выберут единственный дочерний элемент. Для only-child () элемент должен быть буквально единственным дочерним элементом своего родителя, независимо от типа.Для only-of-type () элемент должен быть только единственным дочерним элементом своего типа.

  .example: only-child () {/ * стили * /}

.example p: only-of-type () {/ * стили * /}

Введение в селектор 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 , давайте проверим обратную операцию, отрицательный дочерний диапазон .

: first-child,: last-child,: nth-child и: not (: nth-child)

Селектор : nth-child одновременно мощный и простой в использовании. Это позволяет нам нацеливать определенные элементы на основе их порядка по отношению друг к другу. Мы можем нацеливаться на что-то простое, например, 4-го ребенка, или что-то более сложное, например, на каждого 5-го ребенка, начиная со 2-го (2, 7, 12, 17,…). Зная основы, вы сможете писать мощный, быстрый, эффективный, расширяемый и умный CSS.

Использование селектора : nth-child часто помогает избавиться от необходимости в таких классах, как .товар - последний или . товар - чистый . Если вам нужно стилизовать итеративным способом, вы можете сохранить все стили, содержащиеся в вашем CSS, вместо добавления дополнительных классов в ваш HTML.

Лучше всего то, что селектор : nth-child был добавлен в CSS3 и поддерживается во всех основных браузерах. Это означает, что мы можем использовать его, не опасаясь проблем с поддержкой браузера.

Вот структура селектора : nth-child : an + b

(a) — целое число, которое обеспечивает контекст для итерации (n)
(п) — Буква «н» буквально
(+/-) — Может быть «+» или «-» для построения селектора
(b) — Целое число, обеспечивающее контекст в начальной точке

Вот пример реального селектора : nth-child : 3n — 2

а = 3
п = п
+/- = —
b = 2

Давайте повеселимся!

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

: первенец

Позволяет нам выбрать первого брата или сестру в группе

: последний ребенок

Позволяет нам нацеливаться на последнего брата или сестру в группе

: nth-ребенок (3n)

Позволяет нам ориентироваться на каждого третьего брата или сестру в группе

: n-й ребенок (n + 2)

Позволяет нам нацеливаться на всех братьев и сестер в группе, начиная со второго брата

: n-й ребенок (3n + 2)

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

: эн-ребенок (-n)

Позволяет нам настроить таргетинг на всех братьев и сестер в группе, начиная с 0-го места и работая в обратном направлении (это не нацелено на каких-либо братьев и сестер, поскольку вы не можете работать в обратном направлении с 0-го места, поскольку нет -1-го брата)

: nth-ребенок (-n + 9)

Позволяет нам нацеливаться на каждого брата или сестру в группе, начиная с 9-го места и работая в обратном направлении

: nth-ребенок (-3n + 9)

Позволяет нам нацеливаться на каждого третьего брата или сестру в группе, начиная с 9-го места и работая в обратном направлении.

: not (: nth-child (4n))

Позволяет нам нацеливаться на каждого брата или сестру, который не является 4-м братом в группе

Использование селектора : nth-child может поднять ваш CSS на новый уровень.Это помогает вам писать организованный, эффективный и расширяемый код.

Если вам нужно больше, вы можете прочитать спецификацию, узнать больше из MDN или поэкспериментировать с собственными рецептами.

CSS | Селектор: nth-child () — GeeksforGeeks

CSS | : nth-child () Селектор

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

Синтаксис:

: nth-child (число) {
    // Свойство CSS
}

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

odd: Представляет нечетные элементы в ряду: 1, 3, 5 и т. Д.
четное: Представляет элементы, положение которых четное в ряду: 2, 4, 6 и т. Д.
функциональная нотация (): Представляет элементы, положение братьев и сестер которых соответствует шаблону An + B, для каждого положительного целого или нулевого значения n.

Пример-1: В этом примере выбран каждый нечетный абзац. Используемая формула — 2n + 1, т.е. выбраны 1, 3, 5 и т. Д. Абзацы.

< HTML >

< голова >

< title > CSS: nth-child Selector title >

< стиль >

p: nth-child (2n + 1) {

фон: зеленый;

цвет: белый;

}

стиль >

голова >

< body style = "text-align: center" >

< h2 стиль = "цвет: зеленый;" >

GeeksforGeeks

h2 >

< h3 >

CSS: nth-child Selector

h3 >

< p > Портал информатики для гиков. п. >

< p > Компьютерщики проводят обширную учебную программу. p >

корпус >

html >

Вывод:

Пример 2: В этом примере выбран каждый четный

i.е. 2, 4, 6 и т. Д.

< HTML >
< голова >
< title > CSS: nth-child Selector title >
< стиль >
ли {
ширина: 30%;
}
li: nth-child (четный) {
фон: зеленый;
цвет: белый;
}
стиль >
голова >
< body style = "text-align: center" >
< h3 >
CSS: nth-child Selector
h3 >
< p > Алгоритмы сортировки p >
< ul >
< li > Быстрая сортировка. li >
< li > Сортировка слиянием. li >
< li > Сортировка вставкой. li >
< li > Выборочная сортировка. li >

ul >

корпус >
html >
Выход:
Поддерживаемые браузеры: Браузеры, поддерживаемые селектором: nth-child (), перечислены ниже:
Apple Safari 3.2
Google Chrome 4.0
Firefox 3.
No related posts.

Апрель 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Nt child: :nth-of-type — CSS | MDN

Псевдокласс :nth-of-type | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

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

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

Примеры

:nth-child(3n)

:nth-child(3n+1)

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

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

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

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

:nth-child(n+6)

:nth-child(-n+6)

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

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

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

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

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

nth-of-type()

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

Синтаксис

Значения

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

Примеры

Пример 1

Пример 2

См. также

Ссылки

Псевдокласс nth-child — n-ный потомок родителя

Синтаксис

Значения

Пример

Пример

Пример

Пример

Пример

Плиточная раскладка на CSS Flexbox с помощью order и :nth-child() | by Stas Bagretsov

Итерация потомков (nth-child) с использованием SASS

Разукрашиваем таблицу

Поддержка столбцов

Зебра (:nth-of-type)

Выравнивание текста столбцов (:nth-child)

Последняя строка (:last-child)

Поиск в обратном направлении (:nth-last-child)

Реклама

: энный ребенок | CSS-уловки

: nth-child (an + b из

Достопримечательности

Сопутствующие объекты

Другие ресурсы

Поддержка браузера

Полезное: Рецепты nth-child | CSS-уловки

Выберите только пятый элемент

Выбрать все, кроме первых пяти

Выберите только первые пять

Выбрать каждый четвертый, начиная с первого

Выбрать только нечетное или четное

Выбрать последний элемент

Выбрать второй до последнего элемента

Хочешь поиграть?

Поддержка браузера

: nth-child () | Codrops

Общая информация и примечания

nth-ребенок против nth-of-типа

Как работает

Как работает

Другие псевдоклассы «nth»

Отсчет от конца —

Первый элемент —

Последний элемент —

The Only Element —

Введение в селектор CSS nth-child | Мэтью Кроак | Лучшее программирование

даже

formula (

: first-child,: last-child,: nth-child и: not (: nth-child)