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

Применить 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
| | Применить css к любому по счету элементу | Довольно часто требуется применить css свойство к определенному по счету элементу. Например, это используется в div верстке, к товарам, новостям и т.п |

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>