Применить css к любому по счету элементу

Довольно часто требуется применить css свойство к определенному по счету элементу. Например, это используется в div верстке, к товарам, новостям и т.п. элементам.

Чтобы применить css свойства к первому по счету элементу, например список, достаточно использовать, как мы знаем first-child, а для последнего last-child. Но что делать, если нужно применять определенное свойство к каждому второму div блоку или строго к пятому. В этом случае нас спасет свойство nth-child.

Это свойство работает с li, tr, p и любыми другими элементами. Минус свойства - не работает в ie8 и меньше.

Чтобы его использовать нужно писать так: элемент:nth-child(номер элемента) {свойство};

Ниже вы можете посмотреть рабочие примеры или скачать файл, который демонстрирует работу nth-child

Пример: выбрать второй элемент nth-child(2)

• 1
• 2
• 3
• 4
• 5

Пример: выбрать четные элементы nth-child(even)

• 1
• 2
• 3
• 4
• 5

Пример: выбрать не четные элементы nth-child(odd)

• 1
• 2
• 3
• 4
• 5

Пример: выбрать каждый 3 элемент nth-child(3n), где 3 - каждый третий. Счет с нуля.

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10