Записки HTML-верстальщика: используем :nth-child() по максимуму
Всем лёгкого рабочего понедельника!
В продолжение своих статей о селекторax CSS, псевдоклассах и псевдоэлементах, я хотел бы остановиться на одном из наиболее используемых в повседневной верстке псевдоклассе поподробнее.
Речь пойдет о псевдоклассе :nth-child() и о том, какие интересные штуки можно с ним проделать, зная его особенности и синтаксис.
Для начала, допустим, что у нас есть самый простой список <ul></ul>, состоящий из десяти элементов внутри, и нам нужно определить стили, к примеру, только для пятого элемента внутри этого списка. Для этого мы используем самую простую запись свойства li:nth-child(5):
Как Вы видите на примере выше: из 10 элементов списка только нужный нам 5-й элемент разукрасился в синий цвет.
Также, не составит труда разукрасить, к примеру, каждый третий элемент в синий цвет при помощи селектора li:nth-child(3n), где вместо n будут подставляться значения от 0 и до бесконечности (равнозначно li:nth-child(3), li:nth-child(6), li:nth-child(9) и до бесконечности):
Немного усложняем: для того, чтобы у нас разукрасились только четные элементы списка, мы можем использовать селектор li:nth-child(2n), либо альтернативу ему li:nth-child(even):
Еще чуток усложняем: для выделения только нечетных элементов списка, мы можем использовать селектор li:nth-child(2n-1), либо альтернативу ему li:nth-child(odd):
Добавив минус перед n, мы сможем выделить определенное количество элементов в начале нашего списка. Например, выделить первые 6 элементов можно при помощи li:nth-child(-n+6):
Комбинирование нескольких nth-child:
Ну, и самое интересное. Скомбинировав несколько nth-child, идущих друг за другом, мы можем добиться очень интересных результатов.
Например, выделить промежуток внутри списка. К примеру, элементы с 3 по 6 при помощи комбинации li:nth-child(n+3):nth-child(-n+6):
В этом примере у нас сначала срабатывает свойство nth-child(n+3) которое выбирает все элементы старше 3-го, а затем выбираются все элементы младше 6-го при помощи :nth-child(-n+6) те элементы, которые удовлетворяют обоим условиям (в нашем случае, с 3 по 6) и стилизуются.
Ну и совсем наркоманский вариант тоже имеет право существовать:
Только нечетные элементы в промежутке от 3 до 7
Вы можете комбинировать эти псевдоклассы как Вам угодно и достичь любой комбинации.