14 Квітень 2015
Рубрика: уроки

Уроки по HTML и CSS: селекторы nth-child и nth-of-type

Селекторы nth-child и nth-of-type — удобное средство для выбора нужных элементов без использования JS. Я покажу несколько примеров и расскажу, где и когда нужно использовать эти селекторы.

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

Тепер я хочу бачити коментарі 8