Nt child: :nth-of-type — CSS | MDN
Псевдокласс :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 | Первый элемент. |
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> </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><em></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><em></code> в группе элементов-потомков.
</h4>
<p>
Элементы 1, 5 и 7 будут выбраны.<br />
3 используется в подсчёте потому что это элемент-потомок,
но он не выбран потому что он не
<code><span></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><em></code> в группе элементов-потомков.
</h4>
<p>
Элементы 1, 4, 6 и 8 будут выбраны.<br />
3 не используется в подсчёте и не выбран, потому что это
<code><em></code>, но не <code><span></code>,
а <code>nth-of-type</code> выбирает только потомков этого
типа. Элемент <code><em></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 последовательно |
Пример
В данном примере мы сделаем красного цвета тот 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 из
Существует малоизвестный фильтр, который можно добавить к Обратите внимание, что это отличается от добавления селектора непосредственно к селектору Это может немного сбить с толку, поэтому пример может помочь проиллюстрировать разницу: Браузер поддерживает фильтр «of» очень ограниченно: на момент написания этой статьи только Safari поддерживал синтаксис. Чтобы проверить статус вашего любимого браузера, вот открытые вопросы, связанные с У меня немного кружится голова, когда я сталкиваюсь с идеальным использованием В этих простых «рецептах» (на самом деле: выражениях) я произвольно использую плоский список элементов списка и случайно выбранных чисел. Но должно быть достаточно очевидно, как изменить их, чтобы получить аналогичный выбор.: 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)
* /
}
: 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 и т. Д. Абзацы.
|
Вывод:
Пример 2: В этом примере выбран каждый четный
|
Выход:
Поддерживаемые браузеры: Браузеры, поддерживаемые селектором: nth-child (), перечислены ниже:
- Apple Safari 3.2
- Google Chrome 4.0
- Firefox 3.