Новий css3 псевдоклас - nth-child.

Привіт всім. Сьогодні ми розберемо новий псевдоклас - nth-child.

Це дуже простий, однак корисний псевдоклас. Давайте створимо простий список

 
1 елемент 
2 елемент 
3 елемент 
4 елемент 
5 елемент 
6 елемент 
7 елемент

Як нам тепер задати стиль, наприклад, для 3 елемента? Раніше довелося б давати йому клас, але тепер можна скористатися псевдоклас CSS3 - nth-child.

Відео: CSS3 nth-child Tutorial Selector Alternate Table Row Style HTML 5 Change Color

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

Відео: HTML and CSS Tutorial 36: nth-child CSS Selector

ul li:nth-child(odd){ 
 color: blue- 
}

Отже, сьогодні ми дізналися про новий псевдоклас CSS3 - nth-child. Дякую за увагу!

Поділися в соціальних мережах:

Схожі