Домой / Рецепты CSS / Псевдокласс nth-child. Использование псевдокласса в CSS3
Псевдокласс nth-child. Использование псевдокласса в CSS3

Псевдокласс nth-child. Использование псевдокласса в CSS3

:nth-child это селектор CSS3, направленный на выбор младших элементов, в зависимости от заданных критериев.

Что это значит? В двух словах, это означает, что мы можем стилизовать элементы в зависимости от того, где они находятся в DOM.

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

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

Демо Скачать
:nth-child это селектор CSS3, направленный на выбор младших элементов, в зависимости от заданных критериев. Что это значит? В двух словах, это означает, что мы можем стилизовать элементы в зависимости от того, где они находятся в DOM. Таблица результатов для различных значений псевдокласса Значение Номера элементов Описание 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…

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.39 ( 4 голосов )
100

Один комментарий

  1. Аватар

    В демо при открытии хромом кракозябры

Оставить комментарий

Ваш email не будет опубликован.

*