Css even: CSS: even and odd rules

CSS: even and odd rules

Languages

See also the index of all tips.

Even and odd rules

One way to improve the readability of large tables is to color alternating rows. For example, the table below has a light gray background for the even rows and white for the odd ones. The rules for that are extremely simple:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

In fact, CSS allows not only allow even/odd alternations, but arbitrary intervals. The keywords ‘even’ and ‘odd’ are just convenient shorthands. For example, for a long list you could do this:

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

This says that every 5th list item is bold, starting with the 3rd one. In other words, the items numbered 3, 8, 13, 18, 23, etc., will be bold.

Even and odd columns

The same works for table columns, too, but then there has to be an element in the document that corresponds to the column. HTML provides COL for that. The table has to start with one COL for every column:

<table>
<col><col><col><col><col><col><col><col><col><col>
<tr><th>Month<th>'94<th>'95<th>'96...

(COL can be used for other things than style, but in this case all we need is that the COL elements are present.) The following rules give the first column a yellow background, and then every second column starting from column 3 a gray one:

col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}

The background of rows (TR) is drawn in front of the background of columns (COL), so if you want to be sure that the background of the columns is visible, you should not set a background on the rows.

Created 6 Febrary 2003;
Last updated Wed 06 Jan 2021 05:40:49 AM UTC

Languages

• Azərbaycan
• Български
• Deutsch
• Ελληνικά
• English
• Español
• Français
• Hrvatski
• Bahasa Indonesia
• Norsk
• Nederlands
• Polski
• Português
• Português brasileiro
• Русский
• ไทย
• Tagalog
• Українська
• Tiếng Việt
• 简体中文
• 繁體中文

About the translations

псевдокласс CSS, odd, even, первый элемент, каждый второй, третий, четные и нечетные элементы

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

/* Выбрать первый элемент списка */
li:nth-child(1) { }

/* Выбрать 5-й элемент списка */
li:nth-child(5) { }

/* Нечетные элементы начиная с первого */
li:nth-child(odd) { }

/* Выбрать каждый третий элемент списка начиная с первого */
li:nth-child(3n - 2) { }

/* Выбрать каждый 3-й элемент списка начиная со 2-го */
li:nth-child(3n - 1) { }

/* Каждый 3-й элемент, имеющий класс "el" */
.el:nth-child(3n) { }

/* Кроме первого элемента */
:nth-child(n+2) { }

/* Первые три элемента */
:nth-child(-n+3) { }

Допустимые значения псевдокласса

Значение, указываемое в скобках, означает номера элементов, которым будет присвоен определенный стиль, и может быть задан одним из следующих способов:

• слово odd – указание всех нечетных элементов-наследников;
• even – указание всех четных элементов;
• положительное целое число – указание одного элемента;
• формула вида an + b, в которой – указание группы элементов, члены которой выбираются  с определенной периодичностью – где a, b – целые числа, n – счетчик, которому поочередно присваиваются целые положительные значения начиная с 0. Если n = 0, то an не указываются, a и b могут быть отрицательными.

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

Обратиться к нечетным элементам можно как значением – odd, так и с помощью формулы 2n+1. Точно так же even можно заменить формулой 2n (каждый второй).

На примере мы сделали таблицу, где для четных элементов установили голубой фон для строк, а для нечетных – светло-зеленый.

See the Pen
nth-child by Андрей (@adlibi)
on CodePen.

Несмотря на то что n может быть любым натуральным числом, учитываются лишь результаты вычисления формулы, равные существующим номерам тегов, то есть с #1 по номер, равный числу элементов – наследников данного родителя.

При необходимости можно задавать в одной строке более одного псевдокласса, объединяя накладываемые ими ограничения.

/* выбор второй, третьей и четвертой ячеек строки*/
td :nth-child(n+2):nth-child(-n+4) 

или

/* выбор четных ячеек начиная с четвертой */
td:nth-child(n+4):nth-child(even) 

А вот цепочка из трех псевдоклассов:

/* происходит отбор четных тегов между 4-м и 12-м включительно */
:nth-child(n+4):nth-child(even):nth-child(-n+12) 

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

tr :nth-child(-n+9) :nth-child(n+5) :nth-child(odd)

Особенности использования

Задавать стиль через псевдокласс :nth-child() можно двумя способами

• указывая тип выделяемого элемента: tr :nth-child(2n);

• записывая без селектора: :nth-child(-n+3).

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

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

Но что же делать, если элементы разнородные – например, у заголовка, кроме подзаголовков, есть и абзацы – а стиль нужно присвоить только некоторым подзаголовкам?

На такой случай в CSS припасен другой инструмент, который учитывает теги только определенного типа. Это :nth-of-type(), еще один псевдокласс. То есть если у вас в списке элементы разного типа, и вы хотите выбрать по определенному правилу только элементы какого-то одного типа, используйте nth-of-type вместо nth-child.

html — Как выбрать нечетные и четные элементы с помощью CSS?

спросил 7 лет, 2 месяца назад

Изменено 6 месяцев назад

Просмотрено 46 тысяч раз

Допустим, у меня есть несколько разделов:

 

<дел>
<дел>
<дел>
 

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

 . box-(нечетное число) {
    цвет:#000;
}
.box-(четное число) {
    цвет:#fff;
}
 

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

Спасибо

• html
• css

Вы можете использовать псевдокласс nth-of-type в сочетании с ключевыми словами нечетный и четный :

 .box:nth-of-type(нечетный) {
цвет фона:#000;
}
    
.box: n-й тип (четный) {
цвет фона:#fff;
}

.коробка {
отображение: встроенный блок;
ширина: 100 пикселей;
высота: 100 пикселей;
граница: 1px сплошная #f00;
} 

 <дел>
<дел>
<дел>
 

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

 .box: n-й ребенок (нечетный) {
    фон: синий;
}
.box: n-й ребенок (четный) {
    фон: зеленый;
} 

 
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet. 
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
 

Или вы можете сделать это, где :nth-child(2n) представляет даже и :nth-child(2n+1) представляет нечетное

 .box:nth-child(2n) {
    фон: красный;
}
.box: n-й ребенок (2n + 1) {
    фон: желтый;
} 

 
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
 

Вы ищете nth-child(нечетное) и nth-child(четное) , если вы не хотите подавать заявку 9=»box-«]:nth-child(четный) { цвет:#fff; }

Пример: https://jsfiddle.net/8tkcuuwm/

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

Таким образом, вы должны установить класс только один раз и при необходимости можете заменить его, не изменяя каждый дочерний элемент отдельно: