: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 на реальных примерах.
Демо СкачатьОбзор
Проголосуйте за урок
Оценка
Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
В демо при открытии хромом кракозябры