Досить часто потрібно застосувати css властивість до певного за рахунком елементу. Наприклад, це використовується в div верстці, до товарів, новин і т.п. елементам.
Щоб застосувати css властивості до першого за рахунком елементу, наприклад список, досить використовувати, як ми знаємо first-child, а для останнього last-child. Але що робити, якщо потрібно застосовувати певну властивість до кожного другого div блоку або строго до п'ятого. У цьому випадку нас врятує властивість nth-child.
Це властивість працює з li, tr, p і будь-якими іншими елементами. Мінус властивості - не працює в ie8 і менше.
Щоб його використовувати потрібно писати так: елемент: nth-child (номер елемента);
Нижче ви можете подивитися робочі приклади або завантажити файл, який демонструє роботу nth-child
Приклад: вибрати другий елемент nth-child (2)
Приклад: вибрати парні елементи nth-child (even)
Приклад: вибрати не парні елементи nth-child (odd)
Приклад: вибрати кожен 3 елемент nth-child (3n), де 3 - кожен третій. Рахунок з нуля.
Читайте також
- Плаваюче меню на сайті за допомогою css
- Ефекти при наведенні на картинку в CSS3. Галерея картинок зі збільшенням CSS3
- Як зробити активний пункт меню через jQuery
- Select списки з ul li елементів з картинками
