Селектор :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 ChromeInternet ExplorerFirefoxSafariOpera
:nth-child(), :nth-last-child()4.09.03.53.29.6

Иконки сделаны в ArtUA.

    Поширити у Фейсбуці
    Надіслати у Messenger
    Зберегти в Pocket
    Надіслати в Telegram
    Надіслати у WhatsApp

    Додати коментар

    Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

    Ви вказали некоректні логін або пароль

    Вибачте, для коментування необхідно увійти.

    8 коментарів

    спочатку нові
    за рейтингом спочатку нові за хронологією

    Вот хорошие видеоуроки по HTML+CSS

    Вводный курс так сказать - ...

    Автор
    Назар Токар

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

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

    Если обратить внимание на другие селекторы например тут -

    http://only-css.com/blog/article/selektory-css3" rel="nofollow" target="_blank">http://only-css.com/blog/article/selektory-css3" rel="nofollow">http://only-css.com/blog/article/selektory-css3" rel="nofollow" target="_blank">http://only-css.com/blog/article/selektory-css3 Можно увидеть что выбирать можно не только так.

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

    Наверное я в чем то не прав и мне сейчас предоставят статистику использования версий браузеров... Но черт возьми! На дворе 2015-й год!

    Автор
    Назар Токар

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

    Спасибо, полезная информация.

    Еще бы по :nth-of-type() примерчиков.

    Автор
    Назар Токар

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

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