Селектор :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

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