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

Содержание

css четный нечетный элемент — ComputerMaker.info

Автор admin На чтение 6 мин. Просмотров 299 Опубликовано 15.12.2019

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Содержание

Значение и применение
Поддержка браузерами
CSS синтаксис:
Версия CSS
Пример использования
Стилизация по порядковому номеру
Стилизация по ключевому слову
Стилизация по простой математической формуле
Отличие :nth-child от :nth-of-type()
Краткая информация
Версии CSS
Описание
Синтаксис
Значения

Значение и применение

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

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

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

Селектор	Chrome	Firefox	Opera	Safari	IExplorer	Edge
:nth-child()	4.0	3.5	9.6	3.2	9.0	12.0

CSS синтаксис:

Версия CSS

Пример использования

Стилизация по порядковому номеру

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

Пример выбора селектора дочерних элементов.

Что общего у элементов, выделенных на изображении? А общее у них то, что они выделены оранжевым цветом. Смешно? Не думаю. Общее у них все же есть, элементы являются вторыми дочерними элементами своих родителей, а элемент

Перейдем к примеру:

В этом примере с использованием псевдокласса :nth-child мы стилизовали элементы

Результат нашего примера:

Пример использования псевдоэлемента :last-child.

Стилизация по ключевому слову

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

even (четные элементы)
odd (нечетные элементы)

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

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

для HTML элемента , который определяет строку таблицы:

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

Пример стилизации четных и нечетных дочерних элементов.

Стилизация по простой математической формуле

Псевдокласс :nth-child() позволяет выбрать не только чётные, нечетные, или дочерние элементы с определённым порядковым номером, но и дочерние элементы, заданные по элементарной математической формуле. Давайте рассмотрим следующий селектор и разберем, что значит эта запись:

4n – каждый четвертый элемент.

2 – с какого элемента начинать.

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

4n – каждый четвертый элемент.
-1 – с какого элемента начинать.

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

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

Пример cтилизации дочерних элементов по математической формуле.

Отличие :nth-child от :nth-of-type()

Давайте разберем еще очень важный пример, чтобы понять в чем заключается отличие псевдокласса

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

Допустим, у нас есть статья, в которой два параграфа и мы хотим стилизовать абзац №2 отлично от первого, установив задний фон цвета khaki:

Допустим мы стоим перед выбором какой селектор использовать: p:nth-child(2) или p:nth-of-type(2). Попробуем проверить как работают оба варианта:

Что не удивительно оба селектора работают для данной задачи. Но в чём разница?

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

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

Пример использования псевдоклассов :nth-of-type() и :nth-child().

В данном примере селектор p:nth-child(2) выбирает второй дочерний элемент своего родителя, а с добавлением заголовка второго уровня (тег

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
9. 0+	1.0+	9.6+	3.1+	3.6+	2.1+	2.0+

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

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

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

Значения

Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю.

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

В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.

Табл. 1. Результат для различных значений псевдокласса

Значение	Номера элементов	Описание
1	1	Первый элемент, является синонимом псевдокласса :first-child .
5	5	Пятый элемент.
2n	2, 4, 6, 8, 10	Все четные элементы, аналог значения even .
2n+1	1, 3, 5, 7, 9	Все нечетные элементы, аналог значения odd .
3n+2	2, 5, 8, 11, 14	—
-n+3	3, 2, 1	—
5n-2	3, 8, 13, 18, 23	—
even	2, 4, 6, 8, 10	Все четные элементы.
odd	1, 3, 5, 7, 9	Все нечетные элементы.

HTML5 CSS3 IE Cr Op Sa Fx

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

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

nth-child и nth-of-type Css выбрать второй элемент

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

Псевдоклассы:first-child и first-of-type в чем разница?

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

Это абзац

Допустим, имеем такую разметку. Цель – обратиться к первому абзацу и стилизовать его отдельно от других без дописывания ему классов. Это можно сделать так:

#wrapper p:first-child{
Color: red;
}

Цвет первого абзаца станет красным, можете проверить.

#wrapper p:first-of-type{
color: red;
}

Произойдет то же самое. Так в чем же разница? А она заключается в том, что псевдокласс first-of-type ищет и находит первый элемент родителя, учитывая его тип, а first-child ничего не ищет – он просто берет первый попавшийся элемент родителя и если это абзац, то применяет к нему стили. Если нет, то ничего не выберется и не применится.

Это абзац

А теперь подумайте: сработает ли в этом случае first-of-type ? Да, потому что он учитывает тип элемента и выберет именно первый абзац, а не первый из вообще всех элементов. А first-child сработает? Попробуйте. Ничего не получится, потому что абзац не стоит первым элементом в родителе.

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

Еще важная деталь

Отсчет элементов идет именно от родительского элемента, поэтому если вы указали так:

Li:first-of-type{
…
}

То выбран будет первые пункты списков в теге body (то есть на всей странице). Таким образом, в любом списке первый пункт будет оформляться по-другому.
Если же написать так:

#sidebar li:first-of-type{
…
}

То выбраны будут только первые пункты списков в сайдбаре, то есть боковой колонке на нашем сайте.

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

Кстати, я забыл упомянуть о противоположных псевдоклассах – last-child (и last-of-type соответственно). Они позволяют выбрать последний элемент из родительского контейнера.

Где вы можете использовать на практике

Я пишу об этих псевдоклассах потому, что они активно используются при верстке с помощью css. Вот есть у вас на странице, например, блок похожих записей, или комментариев, или еще чего. И у вас возникла идея как-то по особенному оформить его первый элемент. А может, последний. Да и вообще любой можно.

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

Popular li:first-of-type{
Padding-top: 20px;
}

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

Вот еще такой пример. У меня в теге body всего три одинаковых серых блока. Напишем так.

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

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

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

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

Ниже приведен список из десяти элементов, и мы воспользуемся псевдоклассами:nth-child, :first-child и:last-child, чтобы выбрать элементы, которые хотим выделить.

Использование псевдокласса CSS:nth-child для выбора единственного элемента

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

Элемент 1
Элемент 2
Элемент 3
Элемент 4

Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

Использование псевдокласса CSS:nth-child для выбора всех элементов, кроме первых пяти

Если задать псевдоклассу:nth-child значение в виде n+ число, можно выбрать все элементы, начиная с элемента с этим порядковым номером:

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

Использование псевдокласса CSS:nth-child для выбора только первых пяти элементов

Когда мы задаем псевдоклассу:nth-child значение в виде отрицательного n+ число, мы выбираем все элементы, находящиеся до элемента с этим порядковым номером:

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5

Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

Использование псевдокласса CSS:nth-child для выбора каждого третьего элемента

Псевдокласс:nth-child можно использовать, чтобы выбрать последовательность элементов, задавая, сколько элементов в последовательности и порядковый номер нужного элемента. Если задать значение 3n+1 , будет выбран каждый третий элемент, начиная с первого:

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

Использование псевдокласса CSS:nth-child для выбора только нечетных элементов

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

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

Использование псевдокласса CSS:nth-child для выбора только четных элементов

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

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

Использование псевдокласса CSS:first-child для выбора первого элемента

Другой псевдокласс:first-child выберет первый элемент:

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

Использование псевдокласса CSS:last-child для выбора последнего элемента

Кроме псевдокласса:first-child есть псевдокласс:last-child, который выберет последний элемент из группы элементов:

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

Использование псевдокласса CSS:nth-last-child для выбора предпоследнего элемента

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

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

Ознакомьтесь с возможностями псевдокласса:nth-child с помощью «Конструктора nth-child».

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

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

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

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

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

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

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

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

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

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

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

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

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

Столбец 1	Столбец 2&. t;td>6
7	7
8	8
9	9

И стили CSS

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

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

webgyry.info

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


12.0+	9.0+	3.5+	4.0+	9.6+	3.2+

Описание

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

Синтаксис

:nth-child(число) { свойства }

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

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

/* выбрать третий по счёту пункт списка */ ul li:nth-child(3) { color: red; }

Всего есть два возможных ключевых слова: odd (нечётные) и even (чётные). Они позволяют выбирать дочерние элементы имеющие чётные или нечётные порядковые номера:

/* выбрать все строки в таблице с нечётным порядковым номером */ tr:nth-child(odd) td { background-color: silver; }

Часть выражения «an» вычисляет позиции дочерних элементов по следующей формуле: число*n, так как n — счётчик, вместо него при вычислении автоматически подставляются числовые значения начиная с 0 и далее значение каждый раз увеличивается на единицу больше предыдущего: 0,1,2,3 и т. д. Допустим нам необходимо выбрать каждый третий пункт списка, для этого нам надо написать всего лишь 3n:

ul li:nth-child(3n) { color: red; }

3 * 0 = 0 — ничего не выбрано
3 * 1 = 3-ий пункт
3 * 2 = 6-ой пункт
и т.д.

Часть выражения «b» позволяет указать с какой позиции следует начинать выбор элементов. Допустим нам необходимо выбрать каждый третий пункт списка начиная со второго пункта в списке, для этого нам надо написать следующее выражение 3n + 2:

Ul li:nth-child(3n + 2) { color: red; }

Таким образом пункты списка будут выбираться по следующей формуле:
(3 * 0) + 2 = 2-ой пункт
(3 * 1) + 2 = 5-ый пункт
(3 * 2) + 2 = 8-ой пункт
и т.д.

Пример:

Пример

текст

Результат данного примера:

puzzleweb. ru

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

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

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

web-standards.ru

Значение и применение

CSS синтаксис:

:nth-child(номер | ключевое слово | формула) { блок объявлений; }

Пример использования

Стилизация по порядковому номеру

Что общего у элементов, выделенных на изображении? А общее у них то, что они выделены оранжевым цветом. Смешно? Не думаю. Общее у них все же есть, элементы

являются вторыми дочерними элементами своих родителей, а элемент

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

:nth-child .

Перейдем к примеру:

Псевдокласс:first-child

Первый заголовок h3 тега body

один
два
три

Второй заголовок h3 тега body

Первый заголовок h3 тега article

один
два
три

:nth-child мы стилизовали элементы

и

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

Результат нашего примера:

Стилизация по ключевому слову

even (четные элементы)
odd (нечетные элементы)

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

Значение even (четные)
1 строка	Позиция	Количество
2 строка
3 строка
4 строка
5 строка

Значение odd (нечетные)
1 строка	Позиция	Количество
2 строка
3 строка
4 строка
5 строка

В этом примере с использованием псевдокласса :nth-child() мы стилизовали четные строки первой таблицы (элементы

) и нечетные во второй таблице.

Стилизация по простой математической формуле

td:nth-child(4n+2) ) внутри строки, начиная со второй ячейки таблицы, будет стилизована:

4n – каждый четвертый элемент.
2

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

td:nth-child(4n-1) { background-color: lightblue; /* устанавливаем цвет заднего фона */ }

Этот селектор означает, что каждая четвёртая ячейка таблицы (

) внутри строки, начиная с третьей ячейки таблицы (-1 ячейки нет по объективным причинам, поэтому происходит сдвиг влево), будет стилизована:

4n – каждый четвертый элемент.
-1 – с какого элемента начинать.

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

Стилизация дочерних элементов по математической формуле

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

В этом примере с использованием псевдокласса:nth-child мы выбрали и стилизовали каждую четвёртую ячейку таблицы (

) внутри строки, начиная со второй ячейки таблицы. Результат нашего примера:

basicweb.ru

Как работает CSS-селектор nth-child

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

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

Вышеприведённый CSS делает следующее: применяет стиля для каждого третьего элемента ненумерованного списка. А именно 3-го, 6-го, 9-го, 12-го и т.д. Но как это работает? А также какую выгоду можно извлечь используя nth-child ?

Основной смысл заключается в выражении в скобках. nth-child принимает два ключевых слова: even (чётный) и odd (нечётный). Смысл их абсолютно ясен. Even выбирает чётные элементы (2, 4, 6), odd — нечётные (1, 3, 5).

Как показано в примере выше, nth-child может обрабатывать выражения. Какое самое простое возможное выражение? Просто число. Если вы напишите какое-нибудь число в скобках, то будет выбран один единственный элемент. Например, выберем пятый элемент списка:

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

Вернёмся к нашему первому примеру, в котором мы использовали выражение (3n+3). Как он работает? Почему он выбирает каждый третий элемент? Вся суть в переменной n. Она принимает целые значения от нуля и больше. Давайте рассмотрим подробнее:

(3 x 0) + 3 = 3 = 3-ий элемент (3 x 1) + 3 = 6 = 6-ой элемент (3 x 2) + 3 = 9 = 9-ый элемент и т. д.

Теперь попробуем следующее выражение: nth-child(2n+1) :

(2 x 0) + 1 = 1 = 1-ый элемент (2 x 1) + 1 = 3 = 3-ий элемент (2 x 2) + 1 = 5 = 5-ый элемент и т.д.

В итоге получили тоже самое что и в случае с odd , таким образом нет нужды часто использовать такое выражение. Более того, наш первый пример тоже можно упростить и использовать вместо оригинального выражения (3n+3), выражение (3n):

(3 x 0) + 0 = 0 = нет соответствия (3 x 1) + 0 = 3 = 3-ий элемент (3 x 2) + 0 = 6 = 6-ой элемент и т.д.

Как видите, результат тот же, но не надо писать «+3». Также мы можем использовать отрицательные значения в выражении. Например, 4n-1:

(4 x 0) — 1 = -1 = нет соответствия (4 x 1) — 1 = 3 = 3-ий элемент (4 x 2) — 1 = 7 = 7-ой элемент и т.д.

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

0 + 3 = 3 = 3ий элемент -1 + 3 = 2 = 2-ой элемент -2 + 3 = 1 = 1-ый элемент -3 + 3 = 0 = нет соответствия

Кроссбраузерность

nth-child является одним из тех самых несчастных атрибутов, которые являются полностью кроссбраузерными, за исключением абсолютного нуля в IE, даже 8-ой версии. Поэтому, когда речь заходит о его использовании, то если ожидаемый результат — это в некотором роде визуальный эффект (например раскраска строк некой таблицы), то это идеальный подход. Но, вероятно, не стоит использовать его для чего-то более важного, что может повлиять, например, на корректность вёрстки.

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

Ну и напоследок

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

www.css-tricks.ru

Значения

Значение	Описание
Число	Положительное число начиная с 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):

Результат выполнения кода:

Пример

Сейчас красными сделаем все четные li:

Результат выполнения кода:

Пример

Сейчас красными сделаем все нечетные li:

Результат выполнения кода:

Пример

Сейчас красными сделаем каждую третью li (начиная с третьей):

Результат выполнения кода:

Пример

В селекторе можно указать диапазон элементов. Допустим, у вас есть список из 20 элементов и нужно выбрать элементы с 7 по 14 включительно. Это можно сделать вот так:

Результат выполнения кода:

code.mu

Syntax

The nth-child pseudo-class is specified with a single argument, which represents the pattern for matching elements.

Keyword values

odd Represents elements whose numeric position in a series of siblings is odd: 1, 3, 5, etc. even Represents elements whose numeric position in a series of siblings is even: 2, 4, 6, etc.

Functional notation

Represents elements whose numeric position in a series of siblings matches the pattern An+B , for every positive integer or zero value of n . The index of the first element is 1 . The values A and B must both be s.

Formal syntax

:nth-child( [ of ]?)

where
= even odd
=

where
=

where
=
= «>» » » «~» » »

where
=

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

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

Что делает CSS-код, приведенный выше? Он выбирает каждый третий элемент внутри маркированного списка: это 3-й, 6-й, 9-й, 12-й и т.д. Давайте посмотрим, как именно работает это выражение и что еще можно сделать с помощью:nth-child .

Всё зависит от того, что находится между скобками. Селектор:nth-child принимает два ключевых слова: even и odd . Тут всё просто: even выбирает чётные элементы, такие как 2-ой, 4-ый, 6-ой и т.д., а odd выбирает нечётные элементы, такие как 1-й, 3-й, 5-й и т.д.

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

UL LI:nth-child(5) { color:#CCC; }

Однако давайте вернемся к 3n+3 из первого примера. Как он работает и почему выбирается каждый третий элемент? Весь фокус в понимании переменной n и приведенного алгебраического уравнения. Подумайте об n , как о начинающемся с нуля множестве целых чисел. Потом дополните уравнение. Так 3n это 3×n , а все уравнение вместе это (3×n)+3 . Теперь, подставляя вместо n числа больше или равные нулю, мы получим:

(3 × 0) + 3 = 3 = 3-й элемент
(3 × 1) + 3 = 6 = 6-й элемент
(3 × 2) + 3 = 9 = 9-й элемент и т.д.

А как насчёт:nth-child(2n+1) ?

(2 × 0) + 1 = 1 = 1-й элемент
(2 × 1) + 1 = 3 = 3-й элемент
(2 × 2) + 1 = 5 = 5-й элемент и т.д.

Так, стоп! Это ведь то же самое, что и odd . Тогда, возможно, не стоит использовать это выражение? Но разве в этом случае мы не подвергаем наш первый пример излишнему усложнению? Что, если вместо 3n+3 мы запишем 3n+0 или ещё проще 3n ?

(3 × 0) = 0 = ничего нет
(3 × 1) = 3 = 3-й элемент
(3 × 2) = 6 = 6-й элемент
(3 × 3) = 9 = 9-й элемент и т.д.

Итак, как вы можете видеть, результат получится такой же, а значит, нет необходимости в +3 . Мы можем использовать и отрицательные значения n , с таким же успехом, как и вычитание в уравнениях. Например, 4n-1:

(4 × 0) – 1 = –1 = ничего нет
(4 × 1) – 1 = 3 = 3-й элемент
(4 × 2) – 1 = 7 = 7-й элемент и т.д.

Использование -n может показаться странным — ведь если конечный результат отрицательный, то никакие элементы в выборку не попадут. Но если дополнить уравнение и снова сделать результат положительным, то выборка окажется довольно интересной: при помощи неё можно будет получить первые n элементов, например так: -n+3:

–0 + 3 = 3 = 3-й элемент
–1 + 3 = 2 = 2-й элемент
–2 + 3 = 1 = 1-й элемент
–3 + 3 = 0 = ничего нет и т.д.

На SitePoint есть хороший справочник с милой табличкой , которую я бесстыдно опубликую здесь:

n	2n+1	4n+1	4n+4	4n	5n-2	-n+3
0	1	1	4	–	–	3
1	3	5	8	4	3	2
2	5	9	12	8	8	1
3	7	13	16	12	13	–
4	9	17	20	16	18	–
5	11	21	24	20	23	–

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

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

Описание

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

Синтаксис

элемент:nth-child(odd | even | | ) {…}

Значения

odd Все нечетные номера элементов. even Все четные номера элементов. число Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке. выражение Задается в виде an+b , где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2…

За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

HTML5 CSS3 IE Cr Op Sa Fx

nth-child

	2134	2135	2136	2137	2138
Нефть	16	34	62	74	57
Золото	4	69	72	56	47
Дерево	7	73	79	34	86
Камни	23	34	88	53	103

Css четный нечетный элемент — Dudom

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

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

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

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

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

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

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

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

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

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

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

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

Значение и применение

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

Селектор	Chrome	Firefox	Opera	Safari	IExplorer	Edge
:nth-child()	4.0	3.5	9.6	3.2	9.0	12.0

CSS синтаксис:

Версия CSS

Пример использования

Стилизация по порядковому номеру

Пример выбора селектора дочерних элементов.

Перейдем к примеру:

В этом примере с использованием псевдокласса :nth-child

мы стилизовали элементы

Результат нашего примера:

Пример использования псевдоэлемента :last-child.

Стилизация по ключевому слову

even (четные элементы)
odd (нечетные элементы)

Пример стилизации четных и нечетных дочерних элементов.

Стилизация по простой математической формуле

4n – каждый четвертый элемент.
2 – с какого элемента начинать.

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

4n – каждый четвертый элемент.
-1 – с какого элемента начинать.

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

В этом примере с использованием псевдокласса :nth-child

мы выбрали и стилизовали каждую четвёртую ячейку таблицы ( ) внутри строки, начиная со второй ячейки таблицы. Результат нашего примера:

Пример cтилизации дочерних элементов по математической формуле.

Отличие :nth-child от :nth-of-type()

Давайте разберем еще очень важный пример, чтобы понять в чем заключается отличие псевдокласса :nth-child от псевдокласса :nth-of-type()

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

Что не удивительно оба селектора работают для данной задачи. Но в чём разница?

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

Пример использования псевдоклассов :nth-of-type() и :nth-child().

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

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

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

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

Значения

Табл. 1. Результат для различных значений псевдокласса

Значение	Номера элементов	Описание
1	1	Первый элемент, является синонимом псевдокласса :first-child .
5	5	Пятый элемент.
2n	2, 4, 6, 8, 10	Все четные элементы, аналог значения even .
2n+1	1, 3, 5, 7, 9	Все нечетные элементы, аналог значения odd .
3n+2	2, 5, 8, 11, 14	—
-n+3	3, 2, 1	—
5n-2	3, 8, 13, 18, 23	—
even	2, 4, 6, 8, 10	Все четные элементы.
odd	1, 3, 5, 7, 9	Все нечетные элементы.

HTML5 CSS3 IE Cr Op Sa Fx

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

Как выделить альтернативный цвет строки таблицы с помощью CSS

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

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

Содержание

Выделение альтернативной строки таблицы Odd

Чтобы выделить нечетные альтернативные строки таблицы, вы можете использовать ключевое слово «нечетный» в селекторе nth-child . Чтобы применить CSS к нечетным строкам таблицы, используйте приведенный ниже синтаксис.

Синтаксис

таблица tr: n-й ребенок (нечетный) { //Введите CSS здесь. }

table tr:nth-child(odd){

//Введите здесь CSS.

}

Вы также можете используйте числовое выражение , чтобы применить CSS к нечетным альтернативным строкам таблицы. Чтобы применить нечетные альтернативные строки таблицы, вы должны использовать числовое выражение 2n+1 . Это применяет CSS к нечетным строкам таблицы с самого начала.

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

Пример

<стиль> таблица. нечетная { граница коллапса: коллапс; } table.odd tr td, th{ граница: 1px сплошная #ccc; отступ: 5px; } table.odd tr: n-й ребенок (2n + 1) { фон: #f1f1f1; } <таблица> старший №ИмяСтранаСамый высокий балл <тд>1Махендра Сингх ДониИндия183* <тд>2Крис ГейлВест-Индия215 <тд>3Рохит ШармаИндия264 <тд>4Фахар ЗаманПакистан210*

<тд>1 <тд>2 <тд>3 <тд>4

110007

160007

9000 210007

0007

70007

Sr. №	1	Махендра Сингх Дхони	Индия	183*
2	Крис Гейл	Вест -инди	215
3	Rohit Sharma	Индия	264
4	Fahar Zaman	Пакистан	210*

Выход

Старший №	Имя	Страна	Наивысший балл
1	Махендра Сингх Дхони	Индия	183*
2	Крис Гейл	Вест-Индия	215
3	Рохит Шарма	Индия	264
4	Фахар Заман	Пакистан	210*

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

Подсветка альтернативной четной строки таблицы

Если вы хотите применить CSS к четным строкам таблицы, вы можете использовать ключевое слово «четный» в селекторе nth-child. Используйте приведенный ниже метод, чтобы применить CSS даже к чередующимся строкам таблицы.

Синтаксис

таблица tr:nth-child(even){ //Введите CSS здесь. }

table tr:nth-child(even){

//Введите здесь CSS.

}

В дополнение к этому, вы также можете применить CSS к четным строкам таблицы, также используя ключевое выражение. Чтобы применить CSS к четным строкам, используйте числовое выражение 2n в селекторе nth-child , как показано ниже:

Пример

<стиль> таблица. даже{ граница коллапса: коллапс; } table.even tr td, th{ граница: 1px сплошная #ccc; отступ: 5px; } table.even tr:nth-child(2n){ фон: #f1f1f1; } <таблица>

старший № Имя Страна Самый высокий балл

Махендра Сингх Дони Индия 183*

Крис Гейл Вест-Индия 215

Рохит Шарма Индия 264

Фахар Заман Пакистан 210*

<тд>1 <тд>2 <тд>3 <тд>4

110007

160007

9000 210007

0007

70007

Sr. №	1	Махендра Сингх Дхони	Индия	183*
2	Крис Гейл	Вест -инди	215
3	Rohit Sharma	Индия	264
4	Fahar Zaman	Пакистан	210*

Выход

Старший №	Имя	Страна	Наивысший балл
1	Махендра Сингх Дхони	Индия	183*
2	Крис Гейл	Вест-Индия	215
3	Рохит Шарма	Индия	264
4	Фахар Заман	Пакистан	210*

Приведенный выше пример содержит таблицу с выделенными чередующимися четными строками.

Выделение как четных, так и нечетных строк

Если вы хотите, чтобы цвет фона чередовал строки таблицы и выделял одновременно четные и нечетные строки, вы должны использовать приведенный ниже пример:

Пример

<стиль> таблица.evenodd{ граница коллапса: коллапс; } table.evenodd tr td, th{ граница: 1px сплошная #ccc; отступ: 5px; } table.evenodd tr:nth-child(2n+1){ фон: #ffc4c4; } table.evenodd tr:nth-child(2n){ фон: #b2f8ff; } <таблица>

старший №

Имя

Страна

Самый высокий балл

Махендра Сингх Дони

Индия

183*

Крис Гейл

Вест-Индия

215

Рохит Шарма

Индия

264

Фахар Заман

Пакистан

210*

110007

160007

9000 210007

0007

90 90

Sr. №	Имя	Страна	Наивысший балл
1	Махендра Сингх Дони	Индия	183*
2	Крис Гейл	Вест -Индии	215
3	rohit sharma	Индия	264
4	Fakhar Zaman	Пакистан	210*

Выход

Старший №	Имя	Страна	Наивысший балл
1	Махендра Сингх Дхони	Индия	183*
2	Крис Гейл	Вест-Индия	215
3	Рохит Шарма	Индия	264
4	Фахар Заман	Пакистан	210*

В приведенном выше примере применяются разные цвета фона для четных и нечетных строк таблицы, как показано выше.

Вы также можете почитать.

Как изменить прозрачность фона элемента div.
Выровняйте элемент div по центру по горизонтали с помощью CSS.
CSS удаляет пунктирную рамку вокруг ссылок.
Запись комментариев в кодах CSS.
как определить CSS для Internet Explorer и добавить таблицу стилей только для IE

Надеюсь, вам понравился этот урок о том, как выделить альтернативные цвета строк таблицы с помощью CSS.

Как изменить стиль строк таблицы с помощью селектора CSS nth-child?

Различные стили альтернативных строк таблицы HTML

Вы можете использовать селектор CSS nth-child для разных стилей чередующихся строк таблицы. Вы можете не только стилизовать альтернативные строки, но и указать другой стиль для строк с заданным номером. Например, стиль каждого 3-го ^-го-го или 4-го ^-го-го ряда отличается от других рядов.

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

Пример стилизации чередующихся строк по нечетному значению

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

См. онлайн-демонстрацию и код

Следующий класс CSS используется и применяется к таблице HTML:

110007

160007

. nth-table {

border-collapse: свернуть;

граница: 1 пиксель сплошная #824100;

}

.nth-table tr:nth-child(нечетный){

background: #9DCECE;

}

.nth-table th{

1 borderted:

цвет: #3E5260;

padding:12px;

}

.nth-table td{

граница: 1px пунктир #000;

цвет: #002F5E;

padding:12px;

ширина:90 пикселей;

}

Демонстрация использования четного значения в селекторе nth-child

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

Посмотреть онлайн-демонстрацию и код

CSS:

110007

160007

9000 210007

0007

.nth-table {

border-collapse: свернуть;

граница: 1 пиксель сплошная #400040;

}

. nth-table tr:nth-child(even){

background: #FFB0FF;

}

.nth-table th{

граница: 1 пиксель с точками #460046;

цвет: #000;

padding:13px;

background-color:#AFD8D8;

}

.nth-table td{

граница: 1px пунктир #000;

цвет: #002F5E;

padding:12px;

ширина:90 пикселей;

}

Как видите, второй строке назначается стиль, указанный в nth-table tr:nth-child(even). Затем ряд номер четвертый, шестой и так далее.

Демонстрация различных стилей каждой третьей строки

Как упоминалось ранее, вы можете не только различать чередующиеся строки, используя нечетные или четные, но также можете указать число, чтобы различать каждую 2 ^-й-й, 3-й ^-й-й, 4-й ^-й-й и так далее ряды.

Для этого просто используйте число в nth-child, например,

nth-table-number tr:nth-child(3n)

Посмотрите онлайн-демонстрацию, щелкнув изображение или ссылку ниже:

Посмотреть онлайн-демонстрацию и код

CSS, использованный для этой демонстрации:

nth-table-number {

граница-коллапс: коллапс;

граница: 1 пиксель сплошная #400040;

}

. nth-table-number tr:nth-child(3n){

background: #DEF3CA;

}

.nth-номер-таблицы th{

граница: 1px с точками #460046;

цвет: #000;

padding:13px;

background-color:#86C442;

border-radius:5px;

}

.nth-table-number td{

граница: 1px dashed #000;

цвет: #002F5E;

padding:12px;

ширина:90 пикселей;

border-radius:50%;

text-align: center;

}

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

Демонстрация начального стиля после определенных строк

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

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

См. онлайн-демонстрацию и код

Вот как используется селектор n-го потомка:

tr:n-й потомок(n+4):n-й-потомок(нечетный)

См. полный код на демонстрационной странице.

Точно так же вы можете использовать селектор nth-child в

или других элементах для изменения стиля.

Стол

Эта высота div необходима для включения закрепленной боковой панели

Отображать разные цвета для нечетных/четных строк, используя цикл ngFor и ngClass .

В этом руководстве показано, как отображать разные цвета для нечетных/четных строк, используя цикл ngFor и ngClass в Angular 9. Давайте посмотрим на нашем примере, как элементы стиля с четным индексом окрашены в другой цвет, чем элементы с нечетным индексом.

Отображение разных цветов для нечетных/четных строк с помощью цикла ngFor и ngClass

Как мы видели в нашем предыдущем уроке по стилизации первого и последнего элемента списка, мы узнали, как стилизовать первый и последний элемент списка. Так же, как стилизация первого и последнего элемента, стилизация четных/нечетных строк списка разными цветами (цветом текста или фона) является наиболее распространенным сценарием использования.

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

Стилизация нечетных/четных строк с помощью ngFor и ngClass — Пример

Например, давайте используем тот же массив JSON из примера Пример: Отображение ответа объекта Json с помощью ngFor. И давайте закрасим нечетные/четные ряды разными цветами.

 jsonArray = [
{
идентификатор пользователя: '10',
возраст: 22,
имя пользователя: «Джон Пол»,
},
{
идентификатор пользователя: '11',
возраст: 35,
имя пользователя: «Питер Джексон»,
},
---
                ---
                ---
]

Чтобы получить нечетные и четные элементы массива JSON, нам нужно присвоить значения « нечетный » и « событие » различным переменным, как показано ниже. Значение переменной будет логическое значение т. е. true/false в зависимости от того, является ли индекс текущего элемента нечетным/четным числом.

Например, если индекс элемента нечетный, то значение переменной будет « true », иначе « false ». Поэтому вы можете использовать эти переменные для стилизации нечетных и четных строк списка, используя ngFor и ngClass , как показано в примере ниже.

 <ул>

    
     {{нечетное}}, {{element.username}}, {{element.uid}}, {{element.age}}

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

mycomponent.component.html

 Это мой первый компонент

<ул>

    
      {{нечетное}}, {{element.username}}, {{element.uid}}, {{element.age}}

Файл класса вашего компонента должен выглядеть так, как показано ниже ( mycomponent.component.ts ). Убедитесь, что вы добавили следующие классы стилей в файл . ts для оформления нечетных и четных строк списка.

 стили:[`

.даже {
цвет: серый;
}

.странный {
цвет синий;
}
  
    `]

Затем используйте директиву ngClass, чтобы применить эти стили для нечетных/четных строк. Так что классы стилей CSS будут динамически применяться к нечетным/четным строкам списка.

 [ngClass]="{ четный: четный, нечетный: нечетный}"

mycomponent.component.ts

 import { Component } from '@angular/core';

@Составная часть({

селектор: 'приложение-mycomp',
URL-адрес шаблона: './mycomponent.component.html',
стили: [`

.даже {
цвет: серый;
}

.странный {
цвет синий;
}
  
    `]
})

класс экспорта MycomponentComponent {

jsonArray = [
{
идентификатор пользователя: '10',
возраст: 22,
имя пользователя: «Джон Пол»,
},
{
идентификатор пользователя: '11',
возраст: 35,
имя пользователя: «Питер Джексон»,
},
{
идентификатор: '12',
возраст: 30,
имя пользователя: «Уилл Смит»,
},
{
идентификатор: '13',
возраст: 25,
имя пользователя: «Питер Пол»,
},
{
идентификатор: '14',
возраст: 34 года,
имя пользователя: «Джонсон Питер»,
},
{
идентификатор: '15',
возраст: 30,
имя пользователя: 'Эрик Смит',
},
]

}

И не забудьте использовать селектор компонентов ‘ app-mycomp ’ в родительском компоненте (app.

n	2n+1	4n+1	4n+4	4n	5n-2	-n+3
0	1	1	4	–	–	3
1	3	5	8	4	3	2
2	5	9	12	8	8	1
3	7	13	16	12	13	–
4	9	17	20	16	18	–
5	11	21	24	20	23	–

n	2n+1	4n+1	4n+4	4n	5n-2	-n+3
0	1	1	4	–	–	3
1	3	5	8	4	3	2
2	5	9	12	8	8	1
3	7	13	16	12	13	–
4	9	17	20	16	18	–
5	11	21	24	20	23	–

n	2n+1	4n+1	4n+4	4n	5n-2	-n+3
0	1	1	4	–	–	3
1	3	5	8	4	3	2
2	5	9	12	8	8	1
3	7	13	16	12	13	–
4	9	17	20	16	18	–
5	11	21	24	20	23	–