Довольно часто требуется применить 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
Добавить комментарий