Рассмотрим сегодня вкусные примеры использования псевдоклассов :nth-child. Работа псевдокласса заключается в добалении стилей к элементам в одном дереве на основе нумерации.

Описание и примеры можно найти в любой документации CSS. В сети их полно, а мы сразу приступим к делу:

Выбрать только пятый элемент

li:nth-child(5) {
    color: red;
}

Чтобы выбрать первый элемент можно использовать :first-child или как вы уже догадались вместо 5 поставить 1.

Выбрать все кроме первых пяти

li:nth-child(n+6) {
    color: red;
}

Если бы тут было более 10 элементов, то выбрались бы все после 5.

Выбрать только первые пять

li:nth-child(-n+5) {
    color: red;
}

Выбрать каждый чертвертый начиная с первого

li:nth-child(4n-7) {  /* или 4n+1 */
    color: red;
}

Выбрать только четные или нечетные

li:nth-child(odd) {
    color: red;
}

li:nth-child(even) {
    color: red;
}

Выбрать последний элемент

li:last-child {
    color: red;
}

Думаю понятно, что если бы было 157 элементов, то выбрался бы именно 157, т.е. последний.

Выбрать второй последний элемент

Если бы было 30 элементов, выбранным оказался бы 29 элемент.

На сегодняшний день псевдокласс :nth-child поддерживается всеми последними версиями браузеров (да и IE9 тоже).

Это перевод и адаптация, оригинальный материал смотрите тут.

(Visited 167 times, 1 visits today)