Селектор :nth-child(n) умеет выбирать один или несколько элементов по их номерам, находяшихся внутри одного родительского элемента. В отличие от :nth-child(), селектор :nth-of-type() выбирает только определённые типы элементов.

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

Как выбрать третий элемент

nth-child css

li:nth-child(3) {
 color: yellow; 
}

Нужно только указать номер вложенного элемента.

Как выбрать все элементы после третьего

уроки css и html nth-child выбрать элементы

li:nth-child(n+4) {
 color: yellow; 
}

Нумерация начинается с нуля, поэтому первый элемент будет иметь номер 0+4.

Как выбрать первые пять элементовуроки css и html nth-child выбрать первые элементы

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

Выбор элементов определённого типа

Также вы можете выбирать только элементы определённого типа. Для этого используется селектор :nth-of-type(), перед которым необходимо указывать, какой именно тег нужно выбирать:

p:nth-of-type(2) {
  color: yellow;
}

Код выше поменяет цвет текста для каждого тега <p>, который является вторым вложенным элементом внутри своего родителя.

Как выбрать каждый третий элемент, начиная с первого

уроки css и html nth-child выбрать каждый третий элемент

li:nth-child(3n+1) {
  color: yellow;
}

Формула an + b описывает цикл, где n это счётчик позиции (начинается с нуля), а b — это начальная позиция цикла.

Как выбрать чётные или нечётные элементы

уроки css и html nth-child выбрать нечётные элементы

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

уроки css и html nth-child выбрать чётные элементы

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

Используйте odd для выбора нечётных и even для чётных элементов.

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

уроки css и html nth-child выбрать последний элемент

li:last-child {
  color: yellow;
}

Вместо last-child можно использовать first-child для выбора первого элемента.

Выбрать элемент по оставшимся до конца

При помощи селектора nth-last-child(n) вы можете легко выбирать предпоследний элемент или любой другой, указывая, сколько осталось элементов до последнего.

уроки css и html nth-child выбрать предпоследний элемент

↑ Тисни «Лайк», щоб читати нас у Фейсбуці
li:nth-last-child(2) {
  color: yellow;
}

Поддержка браузерами

Google Chrome Internet Explorer Firefox Safari Opera
:nth-child(), :nth-last-child() 4.0 9.0 3.5 3.2 9.6
Иконки сделаны в ArtUA.

Засновник і керівник видання Tokar.ua. Програміст, адміністратор української Вікіпедії.

Коменти
Инокентий

Вот хорошие видеоуроки по HTML+CSS
Вводный курс так сказать – …

Назар Токарь

@Инокентий, ага, очень “актуальная” ссылка.

CSS_Angel

Приведенное решение отвалится в ИЕ старых версий.

Если обратить внимание на другие селекторы например тут –
http://only-css.com/blog/article/selektory-css3 Можно увидеть что выбирать можно не только так.

Alex

@CSS_Angel, чем больше люди пишут кастыли для старых версий IE, тем чаще нам ( разработчикам ) прийдется это делать. Я имею ввиду пусть менеджер не стелится под клиента а говорит : “Старые версии IE – это дополнительная цена, это время на разработку, это неактуально. Уже вышла 10-я винда и там стоит Эдж, который прекрасно все “понимает”… Давайте не будем это делать, поскольку это ваши деньги и время.”
Наверное я в чем то не прав и мне сейчас предоставят статистику использования версий браузеров… Но черт возьми! На дворе 2015-й год!

Назар Токарь

@Alex, да вообще всё правильно, пора забыть о старом ослике, как о страшном сне.

Алексей

уже 18, а ещё ie поддерживаем

Max

Спасибо, полезная информация.
Еще бы по :nth-of-type() примерчиков.

Назар Токарь

@Max, спасибо за идею, добавил :)

Max

@Назар Токарь, Отлично, спасибо )