Css каждый третий: Как выбрать каждый третий элемент у которого нет определенного класса? — Хабр Q&A – Как работает nth-child — Веб-стандарты

Содержание

Как работает nth-child — Веб-стандарты

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


	UL LI:nth-child(3n+3) {
	    color:#CCC;
	    }

Что делает 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) {
color:#CCC; }

Однако давайте вернемся к 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 12 8 8 1
3 7 13 16 12 13
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, там вы сможете найти код для наиболее распространенных случаев.

Перевод оригинальной статьи «How nth-child Works» Криса Койера (Chris Coyier), опубликованной на сайте «CSS-Tricks».

Теги: css, вёрстка

css каждый третий элемент | Все о Windows 10

На чтение 3 мин. Просмотров 1 Опубликовано

Иногда, при работе с CSS нужно выбрать какой-то определенный по счету элемент, например, в списке, таблице и.т.д. Либо нужно выбрать каждый второй, третий и.т.д. элементы. Давайте рассмотрим способ, как это можно сделать с помощью CSS и псевдокласса nth-child.

Для примера возьмем немаркированный список:

Давайте выделим красным цветом, например, пятый по счету элемент li. Для этого воспользуемся псевдоклассом CSS nth-child

Для того, чтобы выбрать 5 элемент, в качестве параметра для псевдокласса nth-child, нужно указать цифру 5. Все просто. Цифра 5 это позиция элемента, по порядку, в котором он находится в коде.

Вот какой результат получился.

Вместо цифры «5» можно указывать любое другое число, в зависимости от того элемента, который вы хотите выбрать.

Например, для того, чтобы выбрать каждый второй элемент с помощью CSS, необходимо написать:

Что делать, если нужно выбрать каждый второй элемент с помощью CSS, а не только второй. Как быть в этом случае?

Используйте следуйющий код:

По сути, добавляем символ «n» к цифре.

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

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

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

Значение по умолчанию Нет
Применяется Ко всем элементам
Ссылка на спецификацию http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

Значения

Если 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+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 Все нечетные элементы.

HTML5 CSS3 IE Cr Op Sa Fx

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

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

У меня есть колонка с множеством блоков по 50% ширины (по 2 в ряд).

Мне нужно поменять цвет в каждом 3 и 4 блоках.

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

:nth-child() | WebReference

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

:nth-child(an ± b) { … }

Вместо a и b подставляются конкретные целые числа, а n является счётчиком и остаётся в исходном виде. Числа a и b могут быть отрицательными или нулём, в таком случае их можно не записывать — 2n+0 идентично 2n.

Формулу an+b следует понимать так: выбрать каждый a элемент, начиная с b. К примеру, 2n+3 означает выбрать каждый второй элемент, начиная с третьего. Вместо n браузер самостоятельно подставляет числа, начиная с 0. Поэтому мы можем определить какие элементы будут выбраны, самостоятельно заменяя n числами 0, 1, 2 и т. д. Таким образом, сперва выберется третий элемент (2×0+3=3), затем пятый (2×1+3=5), седьмой (2×2+3=7) и так до самого конца. Элементы с нулевым или отрицательным индексом игнорируются, поскольку таких элементов не существует.

Счётчик n начинается с 0.

Приведём несколько типовых комбинаций.

:nth-child(3)

Выбрать только третий элемент.

:nth-child(1)

Выбрать первый элемент. Идентично использованию :first-child.

:nth-child(n+3)

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

:nth-child(2n)

Выбрать все чётные элементы. Вместо 2n можно использовать ключевое слово even — :nth-child(even).

:nth-child(2n+1)

Выбрать все нечётные элементы. Вместо формулы можно использовать ключевое слово odd — :nth-child(odd).

:nth-child(-n+3)

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

:nth-child(3n)

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

:nth-child(3n+2)

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

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

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

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

Пример 1. Колонки таблицы

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>:nth-child()</title> <style> table { width: 100%; } th, td { padding: 4px; } td:nth-child(even) { background: #c7c7c7; /* Цвет фона чётных ячеек */ } td:nth-child(odd) { background: #f0f0f0; /* Цвет фона нечётных ячеек */ } </style> </head> <body> <table> <thead> <tr> <th></th> <th>2023</th><th>2024</th><th>2025</th> </tr> </thead> <tbody> <tr> <td>Heфть</td> <td>43</td><td>51</td><td>79</td> </tr> <tr> <td>3oлoтo</td> <td>29</td><td>34</td><td>48</td> </tr> <tr> <td>Дерево</td> <td>38</td><td>57</td><td>36</td> </tr> </tbody> </table> </body> </html>

Результат данного примера показан на рис. 1.

Колонки таблицы

Рис. 1. Колонки таблицы

Следует помнить, что :nth-child() работает только для однотипных братских элементов, вроде <li>, <td>, <tr> и др. В нижеприведённом примере братскими (имеющими общего родителя) являются элементы <li>. При этом элементы <a> не являются братскими, так как у каждого из них собственный родитель.

<ul>
  <li><a>Ссылка</a></li>
  <li><a>Ссылка</a></li>
  <li><a>Ссылка</a></li>
</ul>

В итоге селектор a:nth-child(2) для выбора второй ссылки не работает. Чтобы до неё добраться следует воспользоваться комбинированными селекторами. Обращаемся ко второму пункту списка <li>, а уже затем к ссылке <a>.

li:nth-child(2) > a { color: green; }

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Css nth child каждый третий. Как работает nth-child — Веб-стандарты. Дочерние селекторы CSS

Первое правило – p:first-child – касается элемента p: если он является первым дочерним элементом своего родителя , то к нему применяется стиль (в нашем случае это жирный шрифт и преобразование текста в верхний регистр). Если в данный HTML-код сразу после открывающего тега

добавить еще какой-нибудь тег (к примеру,

), то стиль p:first-child уже не будет отображаться, поскольку

Перестанет быть первым дочерним тегом. В данном случае первым дочерним элементом будет h3 .

Всё то же самое происходит и с правилом p:last-child – стиль CSS будет применен к тегу

Лишь тогда, когда он будет являться последним дочерним элементом своего родителя . Добавьте после

Любой другой тег отличного типа и вы увидите, что правило p:last-child перестанет применяться.

Правило p:nth-child(3) работает для третьего дочернего тега

(об этом свидетельствует число 3 в скобках). Цвет шрифта для этого абзаца становится красным. Вы можете изменить число 3 (например, на 2) и посмотреть результат.

Правила tr:nth-child(odd) и tr:nth-child(even) работают для нечётных и чётных элементов tr соответственно. Вы можете увидеть результат на скриншоте, а также скопировать весь код и поэкспериментировать со стилями самостоятельно.

Пример использования:first-of-type, :last-of-type, :nth-of-type и:only-of-type

Первый ребенок

Второй ребенок

Третий ребенок

Четвертый ребенок

Пятый ребенок

Последний ребенок

/* CSS */ p:first-of-type { color: violet; text-transform: uppercase; } p:last-of-type { font-style: italic; font-size: 0.8em; } p:nth-of-type(3) { color: red; } p:nth-of-type(odd) { background-color: #A2DED0; } p:nth-of-type(even) { background-color: #C8F7C5; } h4:only-of-type { text-decoration: underline; }
Скриншот: применение:first-of-type, :last-of-type, :nth-of-type и:only-of-type

Первое правило CSS, которое вы видите – это p:first-of-type . Что оно делает? Оно выбирает дочерний элемент типа p , который первым встречается у родителя. И не важно, на каком месте среди элементов других типов находится данный тег – на первом, втором или десятом. В этом и заключается отличие между псевдоклассами:first-child и:first-of-type .

Второе правило – p:last-of-type – применяет стиль к последнему дочернему элементу типа p . Как видно из HTML-кода, после последнего тега

Есть еще и тег

, присутствие которого никак не влияет на выполнение CSS-правила (в отличие от варианта с:last-of-child).

Следующее правило – p:nth-of-type(3) – изменяет цвет шрифта на красный. Применяется этот стиль к тегу

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

Который по факту является пятым ребенком тега

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

С красным шрифтом находится на третьем месте (среди тегов своего типа). Таким образом работает данное правило.

Правила p:nth-of-type(even) и p:nth-of-type(odd) работают аналогично: поскольку перед двоеточием указано имя p , то выбираются четные и нечетные дочерние элементы типа p и окрашиваются в заданные цвета. Остальные элементы пропускаются.

Последнее правило – h4:only-of-type – применяется к содержимому тега

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

является единственным дочерним элементом своего типа. Если в HTML-код добавить еще один тег

, стиль не будет применён.

Выводы

Дочерний селектор CSS позволяет изменить стиль дочернего элемента HTML-документа, исходя из того, кто является его родителем.

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

Псевдоклассы:first-of-type, :last-of-type, :nth-of-type, :only-of-type позволяют применять стиль к дочерним элементам HTML-документа, ориентируясь на их тип, а также на нумерацию в дереве элементов.

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

Обозначения

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

Значения

odd Все нечётные номера элементов. even Все чётные ном

html - Стиль каждый третий элемент?

Чистый CSS, Javascript Нет, с IE7 / 8 Поддержка

Требуется изменение HTML, или ...

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

Демо Fiddle

HTML

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>   
</section>

CSS

.explicitClass {
    your-property-to-change: your-value-desired;
}

... Требуется Обширный CSS разметки

Или вы должны создать CSS , что «отсчет» для вас в массивном пути. Как отметил Indy в своем ответе (не знаю , почему он заявил , смежный родственный «не доступен по умолчанию в IE8 или ниже» , как это неправильно ), это может быть обработан с помощью CSS препроцессора, но даже тогда, вы действительно не не хочет идти по этому пути , если у вас есть очень ограниченное количество элементов, вероятно , не больше , чем то , что вы вывесили на ваш пример. Если сотни элементов, это не практично. Это решение не требует каких - либо изменений в вашем HTML.

DEMO Fiddle

CSS

section div:first-child,
section div:first-child + div + div + div,
section div:first-child + div + div + div + div + div + div {
    your-property-to-change: your-value-desired;
}

В конце концов, я согласен с JoshC и Indy

Я предложил выше ответы, чтобы показать, что вы должны сделать, если вы действительно хотите, что вы говорите, что вы хотите. Если бы это было, если это не было абсолютно необходимо, чтобы эти изменения стилей на каждом третьем элементе (так Javascript выключен губительно для всей схемы, и даже то, что можно было бы обойти, чтобы рестайлинг для не JavaScript), я хотел бы использовать ответ JoshC как ваш CSS, а затем использовать некоторые формы решения яваскрипта, чтобы сделать его обратную совместимость (как отмечено Инди, или в любой другой форме раствора JavaScript).

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

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