Как выбрать каждый 4 элемент css
Перейти к содержимому

Как выбрать каждый 4 элемент css

  • автор:

Как ра­бо­та­ет nth-child

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

ul li:nth-child(3n+3)

Что делает CSS-код, приведенный выше? Он выбирает каждый третий элемент внутри маркированного списка: это 3-й, 6-й, 9-й, 12-й и т.д. Давайте посмотрим, как именно работает это выражение и что еще можно сделать с помощью :nth-child .

Всё зависит от того, что находится между скобками. Селектор :nth-child принимает два ключевых слова: even и odd . Тут всё просто: even выбирает чётные элементы, такие как 2-й, 4-й, 6-й и т.д., а odd выбирает нечётные элементы, такие как 1-й, 3-й, 5-й и т.д.

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

ul li:nth-child(5)

Однако давайте вернемся к 3n+3 из первого примера. Как он работает и почему выбирается каждый третий элемент? Весь фокус в понимании переменной n и приведенного алгебраического уравнения. Подумайте об n , как о начинающемся с нуля множестве целых чисел. Потом дополните уравнение. Так 3n это 3×n , а все уравнение вместе это (3×n)+3 . Теперь, подставляя вместо n числа больше или равные нулю, мы получим:

  • (3 × 0) + 3 = 3 = 3-й элемент
  • (3 × 1) + 3 = 6 = 6-й элемент
  • (3 × 2) + 3 = 9 = 9-й элемент и т.д.

А как насчёт :nth-child(2n+1) ?

  • (2 × 0) + 1 = 1 = 1-й элемент
  • (2 × 1) + 1 = 3 = 3-й элемент
  • (2 × 2) + 1 = 5 = 5-й элемент и т.д.

Так, стоп! Это ведь то же самое, что и odd . Тогда, возможно, не стоит использовать это выражение? Но разве в этом случае мы не подвергаем наш первый пример излишнему усложнению? Что, если вместо 3n+3 мы запишем 3n+0 или ещё проще 3n ?

  • (3 × 0) = 0 = ничего нет
  • (3 × 1) = 3 = 3-й элемент
  • (3 × 2) = 6 = 6-й элемент
  • (3 × 3) = 9 = 9-й элемент и т.д.

Итак, как вы можете видеть, результат получится такой же, а значит, нет необходимости в +3 . Мы можем использовать и отрицательные значения n , с таким же успехом, как и вычитание в уравнениях. Например, 4n-1 :

  • (4 × 0) – 1 = –1 = ничего нет
  • (4 × 1) – 1 = 3 = 3-й элемент
  • (4 × 2) – 1 = 7 = 7-й элемент и т.д.

Использование -n может показаться странным — ведь если конечный результат отрицательный, то никакие элементы в выборку не попадут. Но если дополнить уравнение и снова сделать результат положительным, то выборка окажется довольно интересной: при помощи неё можно будет получить первые n элементов, например так: -n+3 :

  • –0 + 3 = 3 = 3-й элемент
  • –1 + 3 = 2 = 2-й элемент
  • –2 + 3 = 1 = 1-й элемент
  • –3 + 3 = 0 = ничего нет и т.д.

На SitePoint есть хороший справочник с милой табличкой, которую я бесстыдно опубликую здесь:

n 2n+1 4n+1 4n+4 4n 5n-2 -n+3
0 1 1 4 3
1 3 5 8 4 3 2
2 5 9 1 8 8 1
3 7 1 1 1 1
4 9 17 20 16 18
5 11 21 24 20 23

Поддержка браузерами Скопировать ссылку

Селектор :nth-child — один из немногих CSS-селекторов, который почти полностью поддерживается в современных браузерах и абсолютно не поддерживается в IE, даже в IE8. Поэтому когда дело доходит до его использования, и конечный результат сделан по технологии прогрессивного улучшения — вы можете смело использовать его для некоторых оформительских элементов, вроде расцветки строк таблицы. Однако не стоит применять его в более серьезных случаях. Например, полагаться на него в раскладке сайта или удалять правое поле из каждого третьего блока в сетке три на три, чтобы они вошли в ряд.

Спасением здесь может послужить библиотека jQuery, которая реализует поддержку всех CSS-селекторов, включая :nth-child , даже в Internet Explorer.

Всё равно неясно? Скопировать ссылку

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

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

Псевдокласс :nth-child

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

Синтаксис

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

Синтаксис

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

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 Первый элемент, является синонимом псевдокласса :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)

Пример

nth-child

  2134 2135 2136 2137 2138
Нефть 16 34 62 74 57
Золото 4 69 72 56 47
Дерево 7 73 79 34 86
Камни 23 34 88 53 103

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

Применение псевдокласса :nth-child к строкам таблицы

Рис. 1. Применение псевдокласса :nth-child к строкам таблицы

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

Спецификация Статус
Selectors Level 4 Рабочий проект
Selectors Level 3 Рекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

9 12 1 9.5 3.1 3.5
2.1 1 9.5 3.1

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

См. также

  • :nth-child()
  • :nth-of-type()
  • Нумерованные списки
  • Псевдокласс :nth-last-child
  • Псевдокласс :nth-last-of-type
  • Псевдокласс :nth-of-type
  • Псевдоклассы в CSS

CSS псевдокласс nth-child. Как выбрать все четные элементы списка, таблицы, блока, и.т.д.

Иногда, при оформлении страниц, хочется немного «автоматизировать» стили CSS.

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

Можно, конечно, каждому четному элементу присвоить, какой-то определенный class, но это хорошо, когда элементов не слишком много. Добавлять это все вручную не всегда возможно и не всегда хочется.

Мне бы хотелось рассказать о методе, который основывается на использовании псевдокласса nth-child.

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

Одним из способов применения этого псевдокласса на практике является выборка всех четных элементов, которые располагаются в дереве HTML-документа.

Есть несколько вариантов, как это можно реализовать. Давайте их разберем.

1 вариант. Использовать параметр even.

Предположим, что у нас есть вот такой список:

  • Элемент 1
  • Элемент 2
  • Элемент 3
  • Элемент 4
  • Элемент 5
  • Элемент 6
  • Элемент 7
  • Элемент 8
  • Элемент 9
  • Элемент 10

Чтобы выделить красным цветом все четные элементы в этом списке, нужно добавить стиль CSS:

ul li:nth-child(even)

В итоге, получиться следующая картина.

Even – это ключевое слово, которое означает, что будут выбраны четные элементы.

Красивое решение, не правда ли? Всего одна строка CSS стилей.

2 вариант. Использовать параметр 2n.

Этот вариант можно использовать, как альтернативный. Значение 2n означает, что будет выбран каждый второй элемент, а каждый второй элемент, по сути, является четным.

Вот как это может быть использовано применительно для таблиц.

 
Столбец 1 Столбец 2
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8
9 9

tr:nth-child(2n)

23-05-2013 6-39-39

Текст в каждом четном элементе tr стал красным.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Выбирать каждый третий и четвертый элемент CSS

У меня есть колонка с множеством блоков по 50% ширины (по 2 в ряд). Мне нужно поменять цвет в каждом 3 и 4 блоках. Вот пример:

.row < width: 400px; display: flex; flex-wrap: wrap; >.row div < width: 48%; height: 100px; border: 1px solid #000; >.row div:nth-child(3n)

введите сюда описание изображения

Вот скрин блоков, к которым нужно получить доступ через nth-child.

Отслеживать
задан 31 июл 2018 в 19:31
2,216 4 4 золотых знака 26 26 серебряных знаков 67 67 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

.row < width: 400px; display: flex; flex-wrap: wrap; >.row div < width: 48%; height: 50px; border: 1px solid #000; >.row div:nth-child(4n+3), .row div:nth-child(4n)

Отслеживать
ответ дан 31 июл 2018 в 19:36
user176262 user176262

  • html
  • css
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *