Содержание

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

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+9.6+3.1+3.6+2.1+2.0+

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

Версии CSS

Описание

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

Синтаксис

элемент:nth-child(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. Результат для различных значений псевдокласса
ЗначениеНомера элементовОписание
11Первый элемент, является синонимом псевдокласса :first-child.
55Пятый элемент.
2n2, 4, 6, 8, 10Все четные элементы, аналог значения even.
2n+11, 3, 5, 7, 9Все нечетные элементы, аналог значения odd.
3n+22, 5, 8, 11, 14
-n+33, 2, 1
5n-23, 8, 13, 18, 23
even2, 4, 6, 8, 10Все четные элементы.
odd1, 3, 5, 7, 9Все нечетные элементы.

Пример

HTML5CSS3IECrOpSaFx

<!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).

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

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

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+9.6+3.1+3.6+2.1+2.0+

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

Версии CSS

Описание

Псевдокласс :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. Результат для различных значений псевдокласса
ЗначениеНомера элементовОписание
11Первый элемент.
55Пятый элемент.
2n2, 4, 6, 8, 10Все четные элементы, аналог значения even.
2n+11, 3, 5, 7, 9Все нечетные элементы, аналог значения odd.
3n+22, 5, 8, 11, 14
-n+33, 2, 1
5n-23, 8, 13, 18, 23
even2, 4, 6, 8, 10Все четные элементы.
odd1, 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 к изображениям

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

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

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

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

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

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

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

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

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

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

<ul>
            <li>Элемент 1</li>
            <li>Элемент 2</li>
            <li>Элемент 3</li>
            <li>Элемент 4</li>
            <li>Элемент 5</li>
            <li>Элемент 6</li>
            <li>Элемент 7</li>
            <li>Элемент 8</li>
            <li>Элемент 9</li>
            <li>Элемент 10</li>
</ul>

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

ul li:nth-child(even) {color:#F00;}

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

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

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

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

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

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

<table>
  <tr>
    <td>Столбец 1</td>
    <td>Столбец 2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>9</td>
  </tr>
</table>

И стили CSS

tr:nth-child(2n) {color:#F00;}

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

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

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

ul li:nth-child(3n+3) {
    color: #cccccc;
}

Что делает 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: #cccccc;
}

Однако давайте вернемся к 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 есть хороший справочник с милой табличкой, которую я бесстыдно опубликую здесь:

n2n+14n+14n+44n5n-2-n+3
01143
1358432
2591881
371111
4917201618
51121242023

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

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

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

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

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

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

Псевдокласс 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; }

:

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

Обновляется!!! Справочник JavaScript


Пример

Указать цвет фона для каждого элемента <p>, который является вторым дочерним элементом его родителя:

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

Редактор кода »

Определение и использование

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

n это может быть число, ключевое слово или Формула.

Совет: Посмотрите на селектор :nth-of-type() для выбора элемента, который является n — м ребенком, определенного типа , его родителя.


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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
:nth-child() 4.0 9.0 3.5 3.2 9.6

CSS Синтаксис

:nth-child(number) {
    css декларации;
} Демо

Примеры

Пример

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

Здесь мы указываем два разных цвета фона для нечетных и четных элементов p:

p:nth-child(odd) {
    background: red;
}

p:nth-child(even) {
    background: blue;
}

Редактор кода »

Пример

Использовать формулу (an + b). Описание: a представляет размер цикла, n — счетчик (начинается с 0), и b — смещение значения.

Здесь мы указываем цвет фона для всех элементов p, индекс которых кратен 3:

p:nth-child(3n+0) {
    background: red;
}

Редактор кода »

Знакомство с nth-child

Перевод статьи: How nth-child Works.
Автор: Chris Coyier.

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

ul li:nth-child(3n+3) {
color: #ccc;
}

Все, что делает данный CSS код – выбирает каждый третий элемент <li> внутри неупорядоченного списка. Это третий, шестой, девятый, двенадцатый и т.д. элементы. Но каким образом это работает и что еще полезного можно извлечь из использования псевдо-элемента :nth-child() на практике? Давайте разбираться.

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

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

ul li:nth-child(5) {
color: #ccc;
}

А теперь давайте вернемся к примеру, приведенному в начале статьи, когда в качестве параметра указывается выражение 3n+3. Как же вычисляется необходимое значение? И почему выбирается каждый третий элемент в этом случае? Смысл заключается в вычислении значения представленного в скобках псевдо-селектора алгебраического выражения при определенных значениях переменной n, которая принимает значения положительных целых чисел, начиная с нуля. (.) Если выполнить несколько первых подстановок, то получим следующее:

(3 x 0) + 3 = 3 (третий элемент)
(3 x 1) + 3 = 6 (шестой элемент)
(3 x 2) + 3 = 9 (девятый элемент)
и так далее.

Давайте возьмем еще один пример :nth-child(2n+1):

(2 x 0) + 1 = 1 (первый элемент)
(2 x 1) + 1 = 3 (третий элемент)
(2 x 2) + 1 = 5 (пятый элемент)
и так далее.

Если хорошо присмотреться, то последний пример дает тот же результат, что и ключевое слово odd, что позволяет заменять его при необходимости этим выражением. К тому же, на первый взгляд может показаться, что наш первый пример, использующий аргумент 3n+3, слишком усложнен и для достижения того же эффекта можно его упростить подставив вот это выражение — 3n+0 или и того проще 3n. Давайте проверим:

(3 x 0) = 0 (совпадений нет)
(3 x 1) = 3 (третий элемент)
(3 x 2) = 6 (шестой элемент)
(3 x 3) = 9 (девятый элемент)
и так далее.

Как видно из примера, результат тот же, что и в начальном примере, поэтому для выбора каждого третьего элемента будет вполне достаточно упрощенного варианта выражения.

К тому же, мы можем использовать отрицательные значения для переменной n, а также применять другие арифметические операции, кроме сложения, к примеру, вычитание. Давайте рассмотрим пример 4n-1:

(4 x 0) – 1 = -1 (совпадений нет)
(4 x 1) -1 = 3 (третий элемент)
(4 x 2) -1 = 7 (седьмой элемент)
и так далее.

Использование отрицательных значений переменной n кажется несколько странным, так как если выражение в результате дает отрицательное значение, то совпадений указанному селектору найдено не будет. Поэтому, если в этом есть необходимость, то вы должны использовать в выражении достаточно большое положительное число, чтобы в результате вычисления выражения получить желаемый эффект. Таким способом можно выбрать несколько элементов начиная с первого и до определенного значения. К примеру, если использовать выражение -n+3, то можно отобрать первые три элемента из указанного набора:

-0 + 3 = 3 (третий элемент)
-1 + 3 = 2 (второй)
-2 + 3 = 1 (первый)
-3 +3 = 0 (совпадений не найдено)
и т. д.

На ресурсе Sitepoint.com можно найти очень удобную таблицу, предназначенную для работы с псевдо-классом :nth-child, которая приведена ниже.

Поддержка браузерами.

Рассматриваемый в статье псевдо-класс :nth-child является ярким представителем тех CSS классов, которые хотя и поддерживаются большинством известных браузеров, но в тоже время не поддерживаются IE, включая восьмую его версию. Поэтому для принятия окончательного решения, касательно целесообразности использования :nth-child в рамках своего проекта, нужно учитывать важность конечного результата. К примеру, если вы собираетесь применить этот псевдо-класс для визуального форматирования отдельных элементов таблицы (строк или полей), что определяется дизайном страницы, то это, конечно же, допустимо и не приведет к каким-либо катастрофическим последствиям. Но в том случае, если вы планируете использовать этот псевдо-класс для формирования общей структуры сайта, то этого делать не стоит. В качестве примера можно взять ситуацию, когда при помощи :nth-child вы убираете правый отступ у каждого третьего крайнего блока, входящего в блочную структуру страницы для их правильного внутреннего позиционирования. В этом случае, лучше использовать более универсальный способ отбора необходимых элементов – библиотеку jQuery, которая поддерживает все, входящие в CSS спецификацию селекторы, включая :nth-child. Более того, это обеспечит нормальную работу данного селектора даже в IE.

Все еще не можете понять принцип?

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

Post Views: 530

CSS: четные и нечетные правила

CSS: четные и нечетные правила

См. Также указатель всех подсказок.

Правила четных и нечетных

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

tr: nth-child (даже) {background: #CCC}
tr: nth-child (нечетный) {background: #FFF} 
Месяц ’94 ’95 ’96 ’97 ’98 ’99 ’00 ’01 ’02
янв. 14 13 14 13 14 11 11 11 11
фев 13 15 12 15 15 12 14 13 13
мар. 16 15 14 17 16 15 14 15 15
Апрель 17 16 17 17 17 15 15 16 16
Май 21 20 20 21 22 20 21 20 19
июн. 24 23 25 24 25 23 25 23 24
июл. 29 28 26 26 27 26 25 26 25
авг. 29 28 27 28 28 27 26 28 26
сен 24 23 23 26 24 24 24 22 21
окт. 20 22 20 22 20 19 20 22
Ноябрь 18 17 16 17 16 15 14 15
Декабрь 15 13 13 14 13 10 13 11

Фактически, CSS позволяет не только разрешать четные / нечетные чередования, но и произвольные интервалы.Ключевые слова «четный» и «нечетный» просто удобные сокращения. Например, для длинного списка вы можете сделать это:

 li: nth-child (5n + 3) {font-weight: bold} 

Это говорит о том, что каждый 5-й элемент списка выделен жирным шрифтом, начиная с 3-й. Другими словами, элементы с номерами 3, 8, 13, 18, 23 и т. Д., будет жирным.

Четные и нечетные столбцы

То же самое работает и для столбцов таблицы, но тогда должно быть элемент в документе, соответствующий столбцу.HTML предоставляет для этого COL. Таблица должна начинаться с одного COL для каждый столбец:

<таблица>
 
  месяц  '94  '95  '96 ... 

(COL можно использовать не только для стиля, но в этом случае все, что нам нужно, это наличие элементов COL.) Следующие правила придают желтому фону первый столбец, а затем каждый второй столбец, начиная с столбца 3, серый:

col: first-child {background: # FF0}
col: nth-child (2n + 3) {background: #CCC} 
Месяц ’94 ’95 ’96 ’97 ’98 ’99 ’00 ’01 ’02
янв. 14 13 14 13 14 11 11 11 11
фев 13 15 12 15 15 12 14 13 13
мар. 16 15 14 17 16 15 14 15 15
Апрель 17 16 17 17 17 15 15 16 16
Май 21 20 20 21 22 20 21 20 19
июн. 24 23 25 24 25 23 25 23 24
июл. 29 28 26 26 27 26 25 26 25
авг. 29 28 27 28 28 27 26 28 26
сен 24 23 23 26 24 24 24 22 21
окт. 20 22 20 22 20 19 20 22
Ноябрь 18 17 16 17 16 15 14 15
Декабрь 15 13 13 14 13 10 13 11

Фон строк (TR) рисуется перед фоном столбцов (COL), поэтому, если вы хотите быть уверены, что фон столбцы видны, вы не должны устанавливать фон на ряды.

: nth-child () — CSS: каскадные таблицы стилей

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

 
li: nth-child (2) {
  цвет: салатовый;
}


: nth-child (4n) {
  цвет: салатовый;
}
  

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

Значения ключевых слов

нечетные
Представляет элементы, числовая позиция которых в серии братьев и сестер нечетная: 1, 3, 5 и т. Д.
четное
Представляет элементы, числовая позиция которых в серии братьев и сестер четная: 2, 4, 6 и т. Д.

Функциональное обозначение

Представляет элементы в списке, чьи индексы совпадают с индексами, найденными в пользовательском шаблоне чисел, определяемом как An + B , где:
A — целочисленный размер шага,
B — целочисленное смещение,
n — целые положительные числа, начиная с 0.
Его можно читать как An + B -й элемент списка.

Формальный синтаксис

Примеры селекторов

tr: nth-child (odd) или tr: nth-child (2n + 1)
Представляет нечетные строки таблицы HTML: 1, 3, 5 и т. Д.
tr: nth-child (даже) или tr: nth-child (2n)
Представляет четные строки таблицы HTML: 2, 4, 6 и т. Д.
: nth-ребенок (7)
Представляет седьмой элемент.
: nth-child (5n)
Представляет элементы 5 [= 5 × 1], 10 [= 5 × 2], 15 [= 5 × 3], и т. Д. Первый элемент, который должен быть возвращен в результате формулы: 0 [= 5×0], что приводит к несоответствию, так как элементы индексируются с 1, тогда как n начинается с 0. Сначала это может показаться странным, но имеет смысл, когда B часть формула > 0 , как в следующем примере.
: nth-ребенок (n + 7)
Представляет седьмой и все следующие элементы: 7 [= 0 + 7], 8 [= 1 + 7], 9 [= 2 + 7], и т. Д.
: nth-ребенок (3n + 4)
Представляет элементы 4 [= (3 × 0) +4], 7 [= (3 × 1) +4], 10 [= (3 × 2) +4], 13 [= (3 × 3) +4], и т. Д.
: nth-ребенок (-n + 3)
Представляет первые три элемента.[= -0 + 3, -1 + 3, -2 + 3]
p: nth-child (n)
Представляет каждый элемент

в группе братьев и сестер. Это выбирает те же элементы, что и простой селектор p (но с более высокой специфичностью).

p: nth-child (1) или p: nth-child (0n + 1)
Представляет каждый

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

p: nth-child (n + 8): nth-child (-n + 15)
Представляет с восьмого по пятнадцатый

элементы группы братьев и сестер.

Подробный пример

HTML
  

span: nth-child (2n + 1) , БЕЗ & lt; em & gt; среди дочерних элементов.

Выбираются дочерние элементы 1, 3, 5 и 7.

Диапазон 1! Диапазон 2 Промежуток 3! Диапазон 4 Диапазон 5! Диапазон 6 Диапазон 7!

span: nth-child (2n + 1) , С & lt; em & gt; среди дочерних элементов.

Выбираются дочерние элементы 1, 5 и 7.
3 используется при подсчете, потому что это ребенок, но это не выбрано, потому что это не & lt; span & gt; .

Span! Диапазон Это `em`. Диапазон Span! Диапазон Span! Диапазон

span: nth-of-type (2n + 1) , С & lt; em & gt; среди дочерних элементов.

Выбираются дочерние элементы 1, 4, 6 и 8.
3 не используется при подсчете или выбирается, потому что это & lt; em & gt; , не & lt; span & gt; , а nth-of-type выбирает только дети этого типа. & lt; em & gt; полностью пропускается поверх и проигнорирован.

Span! Диапазон Это `em`. Span! Диапазон Span! Диапазон Span!
CSS
  html {
  семейство шрифтов: без засечек;
}

охватывать,
div em {
  отступ: 5 пикселей;
  граница: сплошной зеленый 1px;
  дисплей: встроенный блок;
  нижнее поле: 3 пикселя;
}

.first span: nth-child (2n + 1),
. второй диапазон: nth-ребенок (2n + 1),
.third span: nth-of-type (2n + 1) {
  цвет фона: салатовый;
}  
Результат

Таблицы BCD загружаются только в браузере

Сравнение псевдоклассов CSS: nth-child vs nth-of-type

Введение

CSS имеет ряд псевдоклассов, которые помогут вам с легкостью стилизовать ваше приложение.Наличие большого количества опций может быть отличным, но также может сбивать с толку понимание того, какой псевдокласс использовать и что он на самом деле делает. Здесь мы рассмотрим псевдоклассы CSS nth-child и nth-of-type , чтобы лучше понять, когда использовать каждый из них и в чем разница.

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

Предварительные требования

Настройка HTML

Чтобы понять разницу между nth-child и nth-of-type , давайте сначала создадим наш HTML, чтобы знать, что мы будем стилизовать.

Допустим, у нас есть раздел на нашей веб-странице, который содержит элементы заголовка (

,

) и абзаца (

).

  <статья>
  

Вот заголовок

Я - абзац со всевозможной информацией.

Давайте добавим еще один абзац для развлечения.

йадда йадда йадда

бла-бла-бла

йадда йадда йадда

Вот подзаголовок

бла-бла-бла

И, может быть, еще один.