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

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 — 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-тым потомком своего родителя:

<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; }

:

Селектор четных и нечетных чисел в TailwindCSS 0002

Команда

W

L

Выигрыш%< /th>

GB

Главная

На выезде

L10

Серия

1

900 02 <тд>

< span>MIA

31

17

. 646

9000 2

0

17-5

14-12

8-2

W2

2

ЧИ

< тд>

< span>30

17

.638

0 .5

17-6

13-11 9000 3

4-6

W2

3

< /td>

CLE

30

9 0002 <тд>

19

. 612

1.5

< span>15-9

15-10

7- 3

W3

4

9000 3

<диапазон>БКН< /span>

29

19

9 0002

.604

2

12-13

9000 2

17-6

4-6

90 002 <тд >

L3

5

MIL

< td>

30

20

9 0002 <диапазон>. 600

2

17-8

13 — 12

5-5

L1 900 03

6

PHI

28

19

.596

90 002

2.5

11-10

17-9

9 0002 <тд >

7-3

W2

900 02 <тр >

7

CHA

27

< тд>

< span>22

. 551

4.5

13-7

14-15

7-3

90 002

W1

 

 

Помогите с четным /нечетный псевдокласс — HTML и CSS — Форумы SitePoint

swani 24 апреля 2017 г., 17:37 1

Привет,

Я не очень часто использовал такой класс и явно что-то упускаю. У меня есть сайт с 5 сотрудниками на нем. У каждого сотрудника есть div, внутри которого находится вся его информация. Я хотел бы чередовать цвета фона, чтобы отделить их друг от друга. Я попытался использовать «:nth-child(odd)», но он нацелен либо на все 5 из них, либо ни на один.

Итак, я попробовал «:nth-child(4)», и он нацелен на 2-й из 5. Я не понимаю. Я могу опубликовать HTML-код, если кто-то предпочитает, но я подумал, что было бы полезнее прокомментировать снимок экрана инспектора в верхней части сайта (см. Приложение).

1700×975 306 КБ

Надеюсь, это что-то действительно глупое, чего я просто не замечаю. Заранее благодарю за любую помощь.

Свани

СамА74 24 апреля 2017 г., 17:50 2

Думаю, проблема в том, что элементы с классом .staff не являются единственными дочерними элементами родительского элемента.
Итак, первый экземпляр .staff на самом деле второй ребенок, а второй на самом деле четвертый.
Это объясняет, почему нечетное не сработало, а 4 нацелено на четвертое.

лебедь 24 апреля 2017 г. , 18:25 3

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

Я думал, что с помощью .staff:nth-child(нечетный) будет нацелен на 1-й, 3-й и 5-й экземпляры элементов с классом .staff независимо от того, где они появляются на странице. Почему это не так? Как бы я написал декларацию, которая делает это?

Кроме того, я просмотрел элементы div .staff , и там нет других элементов с этим классом. Это только те 5, которые я выделил. Я даже вытащил весь div .listing-page и поместил его в локальный файл, так что я просто работаю над этой частью документа, и поведение такое же.

Я также пробовал это: .listing-page > .staff:nth-child(нечетный)

Тот же результат.

СамА74 24 апреля 2017 г. , 18:34 4

свани:

Почему это не так?

Вы используете nth-child , первый или второй дочерний элемент по-прежнему является первым или вторым дочерним элементом независимо от класса. Класс в селекторе только фильтрует, какие элементы выбираются, он не меняет количество или порядок элементов в родительском элементе.
Я бы структурировал html по-другому, возможно, используя элемент списка.
У меня был бы заголовок и нумерация страниц вне родительского элемента.
Разделители могут быть либо псевдоэлементами ::after , либо помещены в дочерние элементы.

лебедь 24 апреля 2017 г., 19:00 5

ОК. Ну, это ясно, что здесь происходит. Рассмотрим этот тест:

 <стиль>
p: n-й ребенок (нечетный) {
граница: 1px сплошной синий;
}

Абзац 1
Абзац 2
Это баннер на талии или что-то еще
Абзац 3
Абзац 4
 

Если вы попробуете, абзац 1 и абзац 4 имеют границы. Итак, это действительно вопрос изменения того, как мы описываем эту декларацию. Я думал, что это объявление p:nth-child(odd) будет описано так:

Нацельтесь на каждый второй элемент абзаца.

Точнее было бы описать так:

Нацельтесь на каждый второй элемент ЕСЛИ это абзац.

Мне это кажется довольно глупым. Неудивительно, что я никогда не использовал это. Структура HTML является частью темы WordPress, которую выбрал клиент. Я могу переделать его, но кажется, что CSS должен легко делать это: «Эй, CSS, пожалуйста, примени эти стили ко всем остальным элементам с классом _____». Кажется, это не так сложно.

В любом случае, большое спасибо за помощь, Сэм. Я очень ценю это.

СамА74 24 апреля 2017 г., 19:08 6

свани:

Нацельтесь на каждый второй элемент, ЕСЛИ это абзац.

No related posts.