Css четные элементы: Псевдокласс :nth-child | htmlbook.ru

Css
14 Апр, 2021
0

Содержание

Псевдокласс :nth-child | 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

Описание

Псевдокласс :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. Результат для различных значений псевдокласса
Значение	Номера элементов	Описание
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	Все нечетные элементы.

Пример

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 Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
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…

Табл. 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 к изображениям

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

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 — 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: четные и нечетные правила

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

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

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

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, чтобы знать, что мы будем стилизовать.

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

) и абзаца (

  <статья>
    Вот заголовок  
   Я - абзац со всевозможной информацией. 
   Давайте добавим еще один абзац для развлечения. 
   йадда йадда йадда 
   бла-бла-бла 
   йадда йадда йадда 
    Вот подзаголовок  
   бла-бла-бла 
   И, может быть, еще один.

Эта разметка будет выглядеть примерно так:

Всего у нас есть

элемент в качестве родительского и девять дочерних элементов: один , один

и семь

тегов.

nth-child и nth-of-type Синтаксис

Есть несколько вариантов того, какие значения можно передать псевдоклассам nth-child и nth-of-type . Здесь используется nth-child , но его также можно заменить на nth-of-type .

: nth-child (2n + 3) : для этого параметра требуются математические вычисления. Цифры на ваше усмотрение; это n , который будет отличаться. Это возьмет выбранные вами элементы, установит n на 0 для начала и будет увеличиваться оттуда.Таким образом, аналогично циклу для в JavaScript, он будет перебирать выбранные вами элементы, обновляя значение n : 2 (0) +3 = 3 , 2 (1) +3 = 5 , 2 (2) +3 = 7 и так далее. Результатом этого будет выбор третьего, пятого, седьмого и т. Д. Элементов.
: nth-child (odd / even) : строки odd или even могут быть переданы для выбора доступных нечетных и четных элементов.
: nth-child (3n) : Вы также можете передать число с переменной n , которая выберет этот интервал вхождения выбранного элемента. Если передано 3 , он выберет третий, шестой, девятый и т. Д. Элементы.
: nth-child (3) : если вы просто передадите число (без n ), он выберет именно этот элемент из DOM. При передаче 3 будет выбран только третий совпадающий элемент.

Использование CSS

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

Псевдокласс nth-child имеет два важных компонента, которые следует учитывать:

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

Если мы перейдем к нашей таблице стилей CSS для приведенного выше примера HTML, мы можем выбрать наши элементы абзаца и сделать цвет шрифта бордовым следующим образом:

  артикул п {
  цвет: бордовый;
}

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

  article p: nth-child (odd) {
  цвет: золотарник;
}

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

Определение, какие элементы выбираются с помощью

nth-child

В нашем примере выше абзацы, которые соответствуют стилю p: nth-child (odd) , должны соответствовать следующим требованиям в следующем порядке:

они являются нечетным потомком родительского элемента
они являются элементом абзаца

Определение четности или нечетности дочернего элемента — это , а не , зависящий от типа.Это означает, что проверка нечетности / четности просматривает всех дочерних элементов в родительском элементе того, что выбирается (элементы абзаца), а затем ищет все абзацы, которые считаются нечетными элементами.

Абзацы, к которым применен желтый стиль шрифта, являются «нечетными» дочерними элементами, и они являются элементами абзаца (

). Это объясняет, почему абзац после подзаголовка в конечном итоге становится бордовым цветом по умолчанию — на самом деле это «четный» дочерний элемент.

Использование CSS

nth-of-type Псевдокласс

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

Давайте воспользуемся вышеприведенным примером, но вместо этого применим nth-of-type .

  <статья>
    Вот заголовок  
   Я - абзац со всевозможной информацией.
   Давайте добавим еще один абзац для развлечения. 
   йадда йадда йадда 
   бла-бла-бла 
   йадда йадда йадда 
    Вот подзаголовок  
   бла-бла-бла 
   И, может быть, еще один.

  артикул п {
  цвет: бордовый;
}

article p: nth-of-type (odd) {
  цвет: золотарник;
}

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

Стили теперь применяются, если элемент соответствует следующему требованию:

Элемент — это абзац с родительским элементом article.
Из выбранных выше абзацев выбираются только нечетные.

Если мы снова посмотрим на это с аннотациями, станет немного яснее, как они выбираются.

Заголовки (

) вообще не рассматриваются с nth-of-type , потому что мы выбираем по типу элемента.В этом случае нас интересуют только элементы

Используете ли вы nth-child или nth-of-type , в конечном итоге будет зависеть от вашей цели стилизации.

Как правило, если вы хотите выбрать интервал селектора независимо от типа элемента, используйте nth-child . Однако, если вы хотите выбрать только определенный тип и применить оттуда выбор интервала, используйте nth-of-type .

Заключение

Селекторы nth-child и nth-of-type оба имеют отличную поддержку браузера.Проверьте nth-child и nth-of-type на CanIUse.com для получения более подробной информации.

Для более полного обзора языка разметки HTML5 ознакомьтесь с нашей серией статей «Как создать веб-сайт в HTML».

CSS: пример селектора nth-child ()

В CSS есть кое-что очень интересное: nth-child () Selector, которым, как я подумал, стоит поделиться здесь. Этот псевдоселектор nth-child () был введен в CSS3. Это помогает найти элемент (или элементы) из списка элементов, которые являются n-м дочерним элементом своего родителя.

CSS: синтаксис селектора nth-child ()

: nth-child (n) {}

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

& lt! DOCTYPE html>
& lthtml>
& lthead>
    & lttitle> CSS: пример селектора nth-child & lt / title>
    & ltstyle>
        div p: nth-child (даже)
        {
            цвет: # ff0000;
            шрифт: 14px Calibri;
        }
        
        div p: nth-child (нечетный)
        {
            шрифт: 17px Calibri;
        }
    & lt / style>
& lt / head>
& ltbody>
    & ltdiv>
        & ltp> Пункт 1 & lt / p>
        & ltp> Пункт 2 & lt / p>
        & ltp> Пункт 3 & lt / p>
        & ltp> Пункт 4 & lt / p>
        & ltp> Пункт 5 & lt / p>
    & lt / div>
& lt / body>
& lt / html>

Попробовать

Я дважды определил селектор nth-child () внутри тега & ltstyle> в приведенной выше разметке.Первый селектор принимает ключевое слово even как параметр, а второй принимает ключевое слово odd. Он найдет элементы, соответствующие индексу каждого элемента, и соответственно изменит цвет и шрифт. Элементы с четным числом будут отображаться красным цветом, а элементы с нечетным числом будут иметь цвет по умолчанию (например, черный).

См. Совместимость с браузером

Вы также можете использовать число (любое число) в качестве параметра с помощью селектора nth-child () следующим образом.

div p: nth-ребенок (2)
{
    цвет: # ff0000;
    шрифт: 14px Calibri;
}

Попробовать

Теперь он изменит цвет второго элемента & ltp> внутри его родительского элемента.

Использование выражений с nth-child

Вы можете использовать выражение или формулу в качестве параметра внутри селектора: nth-child (). Например,

div p: n-й ребенок (2n + 1)
{
    цвет: # ff0000;
    шрифт: 14px Calibri;
}

Попробовать

Как это работает? Формула 2n + 1 может быть получена как,

(2xn) + 1 (его BODMAS в математике)

Это 2, умноженное на n, и здесь n — это счетчик, который начинается с 0 плюс 1.

(2 x 0) + 1
(2 x 1) + 1
(2 x 2) + 1

и так далее.

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

Использование нескольких селекторов: nth-child ()

Это интересно. Вы можете использовать несколько селекторов nth-child в качестве диапазона для поиска и назначения стилей дочерним элементам. Например, у меня есть список элементов & ltp>, и я хочу назначить разные стили для ряда элементов, скажем, между 2-м и 5-м элементами.

div p: nth-ребенок (n + 2): nth-child (-n + 5)
{
    цвет: # ff0000;
    шрифт: 14px Calibri;
}

Попробовать

Изменить ширину элементов div с помощью nth-child

Вот еще один пример селектора: nth-child (), который я сам использовал в своем блоге, чтобы изменить ширину элементов & ltdiv> для настройки внешнего вида.

& lt! DOCTYPE html>
& lthtml>
& lthead>
    & lttitle> CSS: пример селектора nth-child & lt / title>
    & ltstyle>
        .контейнер {ширина: 100%; шрифт: 16px Calibri;}
        h4 {border-bottom: solid 1px #eee;}
        
        ul {стиль списка: нет; маржа: 0; заполнение: 0;}
        ул ли {дисплей: элемент списка; отступ: 0; маржа: 0; ширина: 50%; плыть налево;}
        
        .container div {ширина: 49%; плыть налево; margin-right: 1%;}

        .container div: nth-child (1) {width: 25%;}
        .container div: nth-child (2) {ширина: 70%; float: right;}
    & lt / style>
& lt / head>
& ltbody>
    & ltdiv>
        & ltdiv>
            & lth4> Первый заголовок & lt / h4>
            & ltul>
                & ltli> Содержание 1 & lt / li>
                & ltli> Содержание 2 & lt / li>
                & ltli> Содержание 3 & lt / li>
                & ltli> Содержание 4 & lt / li>
            & lt / ul>
        & lt / div>
        & ltdiv>
            & lth4> Второй заголовок & lt / h4>
            & ltul>
                & ltli> Евразийский голубь с воротником (Голубь) & lt / li>
                & ltli> Волосатый дятел (Дятел) & lt / li>
                & ltli> Белохвостый ястреб (Ястреб) & lt / li>
                & ltli> Пивной воробей (Воробей) & lt / li>
                & ltli> Дятел Льюиса (Дятел) & lt / li>
                & ltli> Американская пустельга (Ястреб) & lt / li>
            & lt / ul>
        & lt / div>
    & lt / div>
& lt / body>
& lt / html>

Попробовать

У меня есть два элемента & ltdiv> внутри контейнера (другой & ltdiv>).Изначально я определил ширину & ltdiv> равной 49%.

. Контейнер div {ширина: 49%; плыть налево; маржа-право: 1%; }

Однако, когда я выполняю код, второй & ltdiv> (под заголовком 2) становится неуклюжим, так как детали (название птиц) длинны. Поэтому мне нужно настроить его таким образом, чтобы каждое имя было в одной строке (не распространялось на следующую строку). Я присвоил каждому элементу индивидуальную ширину с помощью селектора: nth-child ().

.container div: nth-child (1) {width: 25%;}
.container div: nth-child (2) {ширина: 70%; float: right;}

Совместимость с браузером

Псевдоселектор: nth-child () отлично работает с современными браузерами, но, к сожалению, плохо работает с некоторыми старыми версиями IE (до 9.0).

• IE 10 — Да, работал
• Firefox 62+ — Да, работал
• Chrome (любой) — Да, работал
• Opera 56+ — Да, работал

← предыдущийСледующий →

Понравилась статья? Подпишитесь сейчас и получайте все последние статьи и советы прямо в свой почтовый ящик.

: 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 () .
Как работают псевдоклассы CSS, объяснение с кодом и множеством диаграмм
by Nash Vail
Давайте будем честными — бывают случаи, когда CSS действительно может повредить ваш мозг. Достаточно сложно центрировать элемент внутри его родителей.
Сегодня мы собираемся разобраться в еще более сложном аспекте CSS: псевдоклассах.
Обязательный Family Guy CSS gif
Псевдоклассы, которые я здесь рассмотрю, бывают двух видов.
* -селекторы типов
* -детские селекторы
Вы можете подумать: «Но я здесь, чтобы изучать псевдоклассы.Почему мы говорим о селекторах? » Что ж, это в основном одно и то же, и я буду использовать эти термины как синонимы.
Псевдоклассы иногда трудно понять, в основном потому, что они представлены абстрактно. Поэтому я воспользуюсь другим подходом и помогу вам понять это, нарисовав дерево DOM.
Разметка и дерево
Сначала взгляните на этот блок HTML. Я буду использовать этот код во всех своих примерах.
Внутренняя ссылка 1 Внутренняя ссылка 2 Внутренняя внутренняя ссылка 1 Элемент списка 1 Элемент списка 2 < / a> Внутренняя ссылка 3 Внешняя ссылка 1 Outer Link 2
Теперь я собираюсь преобразовать этот код во что-то более наглядное и интуитивно понятное: дерево.
Следующий элемент body имеет 3 дочерних элемента: .main и два элемента anchor .
... Внешняя ссылка 1 Внешняя ссылка 2
Вот как выглядят отношения между телом body и его тремя дочерними элементами, когда вы представляете его в виде дерева:
Рис. 1
Следует помнить, что порядок, в котором размещение в дереве важно.Дочерние элементы, расположенные сверху вниз в коде, размещаются в дереве слева направо.
Затем давайте посмотрим на .main div:
Внутренняя ссылка 1 Внутренняя ссылка 2 ... Внутренняя ссылка 3
.main имеет 4 дочерних элемента. Первые два — это анкерные элементы, , затем ul, и затем снова анкерные элементы.
Рис. 2
Точно так же мы понижаем каждый уровень вложенности и вырисовываем полное дерево из HTML-кода.
Рис. 3 — Древовидное представление HTML-кода
Для того, чтобы эта статья принесла вам какие-либо плоды, важно, чтобы вы разбирались в этом дереве.
«Ха-ха, хороший каламбур!» «Спасибо!» Увеличьте счетчик каламбура до 1, и давайте перейдем к нашему самому первому псевдоклассу.
Псевдокласс №1: только-тип
Все псевдоклассы следуют одному и тому же формату:
what-you-want-to-select: filter {/ * styles * /}
what -you-want-to-select можно использовать для выбора всего, что существует в виде коллекции в DOM.Позвольте мне продолжить и показать вам пример:
a: only-of-type {border: 2px solid black;}
Во фрагменте кода, показанном выше, what-you-want-to- select — это элементы привязки (тег a ), а фильтр — только тип . Мы скоро увидим, что делает этот селектор.
Во-первых, я установил код на случай, если вам лень создать проект тестировщика. Добро пожаловать, друг!
Вы можете проследить, увидеть изменения, запутаться, а затем вернуться к этой статье для объяснения.Ты делаешь свою часть, я сделаю свою.
Вот и я делаю свою часть, объясняя код, показанный выше. Мы начнем с выбора всего, что есть, а затем, в конце концов, отфильтруем.
Рис. 4 — выбор всего
Обратите внимание, как был сделан выбор? Каждый раздел в дереве (пронумерованный от 1 до 5) имеет элементы с общим родителем. Родителем раздела 1 является , тело , родителем раздела 2 -. основной, и так далее. Еще раз обратите внимание, что каждый раздел соответствует более глубокому уровню вложения кода .
Далее, поскольку элементы привязки — это what-you-want-to-selec t, мы сделаем именно это:
Рис. 5 — выбор только элементов привязки
Мы выбрали все элементы привязки в каждом из разделы и пронумеровать их последовательно слева направо. И я уже упоминал, что порядок — слева направо — важен.
Здесь заканчивается элемент «что вы хотите выбрать» часть и начинается фильтрация.
Рис. 6 — Выбор анкерных элементов только одного типа.
only-of type t проверяет каждую секцию и выбирает только те анкерные элементы, которые являются единственными анкерными элементами в соответствующей секции.Обратите внимание, как разделы 3, 4 и 5 — единственные разделы с элементами привязки? Как показано на рисунке 6, это те, которые выбираются и объявляются при применении стиля.
Псевдокласс № 2: first-of-type
Давайте перейдем к той части, где мы заканчиваем выделение всех « what-you-want-to-select » (в нашем случае якорные элементы).
Рис. 7 — Выбор только анкерных элементов.
Фильтр первого типа преобразуется в выбор в каждой из секций только первого вхождения элемента привязки.
Рис. 8 — Выбор первых анкерных элементов.
Вот как выглядит код, который это выполняет:
a: first-of-type {border: 2px solid black;}
Если вы забыли тяжелую работу, которую я проделал для вас по настройке CodePen, вот ссылку еще раз, чтобы проверить, что код отображает в браузере.
Псевдокласс № 3: последний из типа
Если вы не можете сказать по имени, последний из типа — полная противоположность первому типу. Это означает, что в каждом разделе дерева вместо выбора первого вхождения выберите последние.
Рис. 9 -: выбор последнего типа

«А как насчет секций с одним якорным элементом?», Не очень рад, что вы задали этот вопрос. Достаточно просто увидеть, есть ли в разделе только один элемент привязки, он, очевидно, проходит фильтр только для типа , но не только это. Поскольку нет никаких элементов привязки, предшествующих или следующих за этим конкретным тегом, он также пропускает фильтры первого типа и последнего типа (например,g a теги разделов 4 и 5).

Псевдокласс # 4: nth-of-type (number / an + b / even / odd)

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

Для начала объявим следующий стиль.

  a: nth-of-type (1) {border: 2px solid black;}

Это выглядит немного загадочно, но на самом деле довольно просто. Чтобы прочитать селектор, просто возьмите число из круглых скобок и замените n-й в имени селектора на порядковый номер этого номера.Если честно, это еще одно модное английское слово для вас…

Хорошо, вернемся, a: nth-of-type (1) поэтому можно читать как a: first-of-type , и неудивительно, что это работает точно так же, как a: first-of-type и приводит к тому, что элементы выбираются, как показано ниже; только элементы привязки, которые являются первыми типами в соответствующем разделе.

Рис. 10 — Люди вообще это читают?
Что ж, это нормально, но давайте попробуем здесь кое-что другое.
a: nth-of-type (0) {border: 2px solid black;}
Если вы угадали, а я уверен, что вы этого не сделали, в этом случае элементы привязки не будут выбраны. Поскольку нумерация типов (и дочерних элементов, как мы увидим) в каждом разделе начинается с 1, а не с 0, ни в одном из разделов нет элементов привязки «0», и поэтому a: zeroth-of-type ничего не выбирает. . То же самое будет с a: nth-of-type (5) или a: nth-of-type (6/7/8) , потому что нет a: Friday-of-type или a: шестой / седьмой / восьмой по типу в любом из разделов .
Но если бы мы пошли дальше и использовали…
a: nth-of-type (2) {border: 2px solid black;}
… совершенно очевидно, что разделы 1 и 2 имеют второй тип якорных элемента, поэтому выбираются именно они.
Рис. 11 -: nth-of-type (2) или читается как: second-of-type
Точно так же, просто чтобы подчеркнуть здесь мысль, если мы пошли дальше и объявили следующий стиль,
a: nth- of-type (3) {border: 2px solid black;}
он выберет третьи элементы привязки во втором разделе, поскольку раздел 2 является единственным разделом с: элементом привязки третьего типа .
Рис. 12 -: nth-of-type (3) или читается как: third-of-type
Довольно просто, не правда ли? Но числа — не единственное, что вы можете передать в : nth-of-type (…), этот тип сильнее, чем этот, вы также можете передать формулы в форме (a * n) + b (или для краткости an + b ) . Где a и b — константы, а n — значение> = 0. Как вам понравилось, сэр? не волнуйся, через секунду все обретет смысл.
Рассмотрим следующий стиль
a: nth-of-type (n) {border: 2px сплошной черный; }
Формула, переданная в селекторе выше: (1 * n) + 0 [= n] , a равно 1, b равно 0 и n хорошо, n. Далее происходит следующее: начиная с 0 числовое значение n постепенно вставляется в формулу и делается выбор. Следовательно, a: nth-of-type (n) в основном переводится в
a: nth-of-type (0) {border: 2px сплошной черный; } // n = 0a: nth-of-type (1) {border: 2px сплошной черный; } // n = 1a: nth-of-type (2) {border: 2px сплошной черный; } // n = 2a: nth-of-type (3) {border: 2px сплошной черный; } // n = 3a: nth-of-type (4) {border: 2px сплошной черный; } // n = 4
...
Следовательно, в результате будут выбраны все элементы привязки.
Рассмотрим еще один пример
a: nth-of-type (2n + 1) {border: 2px solid black; }
Начиная с 0 и постепенно вставляя значения n в формулу, генерируются следующие селекторы.
// n = 0 подразумевает (2 * 0) + 1 = 1a: nth-of-type (1) {border: 2px solid black; }
// n = 1 подразумевает (2 * 1) + 1 = 3a: nth-of-type (3) {border: 2px сплошной черный; }
// n = 2 подразумевает (2 * 2) + 1 = 5 - Нет выбора, так как ни в одном из разделов нет пятого типа a: nth-of-type (5) {border: 2px solid чернить; }...
Рис. 13 — выборки n-го типа (2n + 1)
Кроме чисел и формул, которые генерируют числа , , вы можете передать либо четное , либо нечетное строки . Даже выбирает все четные вхождения элемента определенного типа в секции, то есть : второго типа : четвертого типа : шестого типа и т. д., а с другой стороны, очевидно, : nth-of-type (odd) выбирает все нечетные вхождения, то есть : first-of-type,: third-of-type,: Friday-of-type e.t.c
Псевдокласс # 5: nth-last-of-type (число / an + b / even / odd)
Этот селектор работает точно так же, как предыдущий, но с одним небольшим отличием. Убедитесь сами…
a: nth-last-of-type (1) {border: 2px сплошной черный; }
Рис. 14 — nth-last-of-type (1)
Обратите внимание, как на каждом уровне нумерация типов привязок выполняется справа налево, а не слева направо. Это единственная разница. last-of-type принимает числа и формулы и четные / нечетные числа точно так же, как nth-of-type , за исключением случаев, когда выполняется выбор, последний тип обрабатывается как первый, второй последний как второй, третий последний как третий и так далее …
На этом мы подошли к концу селекторов типа * типа .Надеюсь, это была забавная поездка для вас, мы начали с только для типа , затем перешли на первого типа , последнего типа и резко погрузились в nth-of-type ( …) и nth-last-of-type (..). Если где-то посередине вы потеряли хватку и упали, я рекомендую вам поиграть с этой ручкой и перечитать объяснение.
Хорошо, пора перейти к следующему в этом менее посещаемом уголке тематического парка CSS. Еще одна категория псевдоселекторов / классов, в которую мы собираемся углубиться, — это классы * -child .С четким пониманием того, как работают селекторы * -of-type , понимание концепции, лежащей в основе селекторов * -child , должно быть для вас легким делом. «Тюлень? Это что? Это единица измерения? » Нет, тупица, это очень простая задача. В любом случае, давайте начнем с нашего самого первого селектора * -child, : only-child .
Дочерний псевдокласс № 1: only-child
Рассмотрим следующий стиль.
a: only-child {border: 2px solid black;}
Теперь это самое простое и понятное определение.Селектор говорит, что нужно выбрать все элементы привязки, учитывая, что элемент привязки должен быть единственным дочерним элементом своего родителя, или, другими словами, выбрать все элементы привязки, родительский элемент которых имеет только один дочерний элемент, и что один дочерний элемент является элементом привязки .
Рис. 15 — a: выбор только для детей
У меня был друг, который никогда не был любимцем своей матери, и он был единственным ребенком. Просто хотел вставить это туда, в любом случае, обратите внимание, что в отличие от селекторов * -of-type мы больше не нумеруем типы, а потомки, начиная, конечно, с 1 (а не с 0).По сравнению с only-of-type, элемент привязки в разделе 3 не выбран, поскольку его родительский элемент ( ul ) имеет 3 дочерних элемента, поэтому, даже если он (элемент привязки на уровне 3) является единственным дочерним элементом типа ‘a’ его родителя, это не единственный дочерний элемент, также есть 2 li s.
Дочерний псевдокласс № 2: first-child
Рассмотрим следующее объявление стиля.
a: first-child {border: 2px solid black;}
Он просто говорит: выберите весь элемент привязки, но с одним условием, элемент привязки должен быть первым дочерним элементом своего родителя.Вот и все, никаких дополнительных объяснений не требуется.
Рис. 16 — a: выбор первого дочернего элемента
Ибо, если вы немного запутались, почему a в разделе 1 не был выбран, это потому, что первый дочерний элемент в разделе 1 (чей родительский элемент — body ) является .main , первый a в разделе 1 является вторым дочерним элементом и не может пройти фильтр first-child , это точная причина, по которой бедный парень не был выбран и получил большой хэштег. отвали.Перейдем к следующему.
Дочерний псевдокласс № 3: last-child
Это та часть, где селекторы должны начать становиться понятными, и вы должны начать думать, что я тупой, пытаясь вам их объяснить. Но меня зовут не расплывчатое лицо, и мне все равно, что вы думаете. «Хорошая ссылка на двадцать один пилот» Да, я знаю, спасибо. Теперь посмотрите на следующее объявление стиля.
a: last-child {border: 2px solid black;}
что вы хотите выбрать ? «Анкерные элементы.”А фильтр вы хотите использовать? последний ребенок. Это довольно просто переводится, чтобы выбрать те элементы привязки, которые являются последними дочерними элементами своего родителя. Или, другими словами, выберите элементы привязки, родители которых, наконец, решили, что это больше не весело, и остановились после того, как этот парень родился. Ниже показано, как выглядит дерево с выбором : последний ребенок .
Рис. 16 -: выбор последнего дочернего элемента.
Дочерний псевдокласс # 4: nth-child (number / an + b / even / odd)
Я надеюсь, что вы смогли переварить Math начинка, которую вам подали в прошлый раз, потому что это должно произойти снова, только на этот раз немного другая корочка.
А теперь я хотел бы, чтобы вы сосредоточили все свое внимание и направили его на следующий пример.
a: nth-child (1) {border: 2px сплошной черный; }
Это все то же самое, что : nth-of-type, Я бы связался с этим разделом статьи здесь, но политики Medium не позволяют этого, если вы хотите освежить информацию, вам придется прокрутить вверх в этот раздел. Если оставить в стороне политики Medium, которые могут измениться в будущем, то что не изменилось, так это процесс расшифровки nth-селекторов.
Как и в случае с : nth-of-type, в имени селектора берет число в скобках и заменяет « nth» порядковым номером этого числа. Поэтому селектор, показанный в примере, эквивалентен a: first-child и работает точно так же; IE выбирает все элементы привязки, учитывая, что они являются первым дочерним элементом своего родителя.
Это должно показать сходство между двумя nth-селекторами (nth-of-type и nth-child), , но мы в любом случае продолжим и рассмотрим другой пример.
a: nth-child (2n - 1) {border: 2px сплошной черный; }
Мы начинаем с постепенного добавления значений n , начиная с 0, в формулу, что позволяет нам понять, что показанный выше селектор в основном эквивалентен показанным ниже.
// n = 0 подразумевает (2 * 0) - 1 = 0 - 1 = -1a: nth-child (-1) {border: 2px сплошной черный; } | Нет выбора
// n = 1 подразумевает (2 * 1) - 1 = 2 - 1 = 1a: nth-child (1) {border: 2px сплошной черный; }
// n = 2 подразумевает (2 * 2) - 1 = 4 - 1 = 3a: nth-child (3) {border: 2px сплошной черный; }
// n = 3 подразумевает (2 * 3) - 1 = 6 - 1 = 5a: nth-child (5) {border: 2px сплошной черный; } | Никаких дальнейших выборов...
Как бы то ни было, если в селектор вводятся числа, выходящие за границы (например, -1, 5, 6… в приведенном выше случае), он просто игнорирует их. Ниже показано, как выглядит дерево с примененным a: nth-child (2n-1) .
Рис. 17 -: Выборки nth-child (2n-1).
У сотрудников CSS Tricks есть очень информативная статья под названием Полезно: nth-child Рецепты, вы должны проверить ее и применить свои знания: nth-child , чтобы проверить . Я бросаю тебе вызов m8.
На этом мы перейдем к последнему селектору в этой статье, точнее говоря, : nth-last-child. Вот дерьмо! почему слово «каламбурно» вообще?
Дочерний псевдокласс # 5: nth-last-child (number / an + b / even / odd)
Этот селектор работает точно так же, как : nth-child , за исключением того, что он начинает выбирать элементы с противоположного направления, как и тот надоедливый учитель средней школы, который задавал вопросы классу, начиная с мирных людей, сидящих на последних скамьях. Боже, я ненавидел его. Если вы посмотрите на нарисованные деревья, то увидите, что дочерние элементы пронумерованы слева направо в каждой секции, но этот парень-селектор видит дерево примерно так.
Рис.18
Дети в каждой секции пронумерованы справа налево. Итак, если мы продолжим и применим следующий стиль
a: nth-last-child (1) {border: 2px solid black; }
элементы привязки будут выбраны, как показано ниже.
Довольно просто, не правда ли? Этот селектор также очень удобно принимает формулы (формы an + b) и четную / нечетную строку , однако выбор выполняется с противоположного конца.
Хорошо, на этом наше совместное путешествие заканчивается.Вы можете оплатить билет, написав эту статью в Твиттере своим друзьям-разработчикам.
Надеюсь, вам понравилось это читать, и вы узнали что-то новое, в том числе несколько новых блестящих английских слов.
Это Нэш завершает сеанс. Увидимся в следующей статье. Следуйте за мной в Twitter, чтобы оставаться на связи. Я пишу в Твиттере о вещах, связанных с разработкой. Много.
Ищете больше? Я регулярно публикую в своем блоге на nashvail.me. Увидимся там, хорошего вам дня!
Введение в селектор CSS nth-child | Мэтью Кроак
odd
Используя nth-child (odd) , вы можете применить CSS к каждому нечетному дочернему элементу.Если бы вы переписали приведенный выше CSS, чтобы повлиять на каждый нечетный элемент, тег p для Келли, Стэнли, Майкла и т. Д. Стал бы красным.
даже
И наоборот, nth-child (even) применит CSS к Creed, Oscar, Jim и т. Д.
formula (
an + b ) может быть любым числом, вы также можете использовать формулу. 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 .
No related posts.

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	–

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	–

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	–