Привет всем. Сегодня разберем новый псевдокласс - nth-child .
Привет всем. Сегодня разберем новый псевдокласс - nth-child.
Это очень простой, однако полезный псевдокласс. Давайте создадим простой список
<ul>
<li>1 элемент</li>
<li>2 элемент</li>
<li>3 элемент</li>
<li>4 элемент</li>
<li>5 элемент</li>
<li>6 элемент</li>
<li>7 элемент</li>
</ul>
Как нам теперь задать стиль, например, для 3 элемента? Раньше пришлось бы давать ему класс, но теперь можно воспользоваться псевдоклассом CSS3 - nth-child.
ul li:nth-child(3) {
color: blue;
}
Теперь третий li будет синего цвета.
Также мы можем задать стиль вот так:
ul li:nth-child(2n) {
color: blue;
}
Обычная прогрессия. 2 сначала умножаем на 1, потом на 2, потом на 3 и так далее. Т.е. в нашем случае синим цветом будут выделены 2, 4 и 6 элемент списка. Умножать можно необязательно на 2, можно и на 3, 4 и другие числа.
Если вы хотите, чтобы были выделены все четные элементы, то укажите в круглых скобках even.
ul li:nth-child(even) {
color: blue;
}
Если же хотите, чтобы наоборот, синим цветом были выделены нечетные элементы, то укажите odd
ul li:nth-child(odd) {
color: blue;
}
Итак, сегодня мы узнали про новый псевдокласс CSS3 - nth-child. Спасибо за внимание!
