Содержание

Псевдокласс :nth-child() | CSS справочник

CSS селекторы

Значение и применение

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

Применение данного псевдокласса широко распространено, он позволяет чередовать стили строк в таблицах, списках, придать стиль сочетанию дочерних элементов и так далее.

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

Селектор
Chrome
Firefox
Opera
Safari
IExplorer
Edge
:nth-child()4.03.59.63.29.012.0

CSS синтаксис:

:nth-child(номер | ключевое слово | формула) {
блок объявлений;
}

Версия CSS

CSS3

Пример использования

Стилизация по порядковому номеру

Давайте рассмотрим пример, в котором перед Вами стоит задача изменить стиль для всех элементов, которые выделены оранжевым цветом на изображении:


Пример выбора селектора дочерних элементов.

Что общего у элементов, выделенных на изображении? А общее у них то, что они выделены оранжевым цветом. Смешно? Не думаю. Общее у них все же есть, элементы <li> являются вторыми дочерними элементами своих родителей, а элемент <h3> тоже можно посчитать, и его порядковый номер будет третьим (третий дочерний элемент своего родителя <body>). Чтобы стилизовать эти элементы, нам необходимо использовать псевдокласс :nth-child.

Перейдем к примеру:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Псевдокласс :first-child</title>
<style>
/* групповой селектор, который выбирает каждый третий дочерний элемент <h3> своего родителя
и каждый второй элемент <li> своего родителя  */

 
h3:nth-child(3), li:nth-child(2) { 
background-color: orange; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<h3>Первый заголовок h3 тега body</h3>
		<ul>
			<li>один</li>
			<li>два</li>
			<li>три</li>
		</ul>
		<h3>Второй заголовок h3 тега body</h3>
		<article>
			<h3>Первый заголовок h3 тега article</h3>
			<ul>
				<li>один</li>
				<li>два</li>
				<li>три</li>
			</ul>
		</article>
	</body>
</html>

В этом примере с использованием псевдокласса

:nth-child мы стилизовали элементы <h3> и <li>, которые имеют определённый порядковый номер дочернего элемента внутри своих родительских элементов.

Результат нашего примера:

Пример использования псевдоэлемента :last-child.

Стилизация по ключевому слову

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

  • even (четные элементы)
  • odd (нечетные элементы)

Стилизация элементов с использованием ключевых слов имеет очень широкое применение, так как вы с легкостью можете выбрать и стилизовать четные, либо нечетные дочерние элементы в документе.

Давайте для примера создадим две простые таблицы с разными стилевыми классами и рассмотрим наглядно разницу в применении значений ключевых слов псевдокласса :nth-child для HTML элемента <tr>, который определяет строку таблицы:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Стилизация четных и нечетных дочерних элементов</title>
<style>
.
 
 primer1 tr:nth-child(even)  { /* стилизация четных дочерних элементов */
background-color: #AAA; /* устанавливаем цвет заднего фона */
}
.primer2 tr:nth-child(odd)  { /* стилизация нечетных дочерних элементов */
background-color: #AAA; /* устанавливаем цвет заднего фона */
}
caption {/* селектор типа (выбираем HTML элемент <caption>) */
color: red; /* устанавливаем цвет текста */
}
</style>
</head>
	<body>
		<table class = "primer1">
			<caption>Значение even (четные)</caption>
			<tr>
				<th>1 строка</th><th>Позиция</th><th>Количество</th>
			</tr>
			<tr>
				<td>2 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>3 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>4 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>5 строка</td><td></td><td></td>
			</tr>
		</table>
		<table class = "primer2">
			<caption>Значение odd (нечетные)</caption>
			<tr>
				<th>1 строка</th><th>Позиция</th><th>Количество</th>
			</tr>
			<tr>
				<td>2 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>3 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>4 строка</td><td></td><td></td>
			</tr>
			<tr>
				<td>5 строка</td><td></td><td></td>
			</tr>
		</table>
	</body>
</html>

В этом примере с использованием псевдокласса :nth-child() мы стилизовали четные строки первой таблицы (элементы <tr>) и нечетные во второй таблице.

Пример стилизации четных и нечетных дочерних элементов.

Стилизация по простой математической формуле

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

td:nth-child(4n+2)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждая четвёртая ячейка таблицы (<td>) внутри строки, начиная со второй ячейки таблицы, будет стилизована:

  • 4n – каждый четвертый элемент.
  • 2 – с какого элемента начинать.

В формулах допускается использование значений со знаком вычитания, но в этом как правило нет необходимости:

td:nth-child(4n-1)  {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}

Этот селектор означает, что каждая четвёртая ячейка таблицы (<td>) внутри строки, начиная с третьей ячейки таблицы (-1 ячейки нет по объективным причинам, поэтому происходит сдвиг влево), будет стилизована:

  • 4n – каждый четвертый элемент.
  • -1 – с какого элемента начинать.

Давайте рассмотрим пример использования:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Стилизация дочерних элементов по математической формуле</title>
<style>
td, th{ /* групповым селектором выбираем заголовочные ячейки и ячейки данных */
border: 1px solid green; /* задаём сплошную границу размером 1 пиксель зеленого цвета */
width: 50px;  /* устанавливаем ширину заголовочным ячейкам и ячейкам данных */
}
td:nth-child(4n+2) {
background-color: lightblue; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<table>
			<tr>
				<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th>
			</tr>
			<tr>
				<td>2</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
			<tr>
				<td>3</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
			<tr>
				<td>4</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
		</table>
	</body>
</html>

В этом примере с использованием псевдокласса :nth-child мы выбрали и стилизовали каждую четвёртую ячейку таблицы (<td>) внутри строки, начиная со второй ячейки таблицы.

Результат нашего примера:

Пример cтилизации дочерних элементов по математической формуле.

Отличие :nth-child от :nth-of-type()

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

Допустим, у нас есть статья, в которой два параграфа и мы хотим стилизовать абзац №2 отлично от первого, установив задний фон цвета khaki:

<article>
	<p>Первый параграф </p>
	<p>Второй параграф</p> 
</article>

Допустим мы стоим перед выбором какой селектор использовать: p:nth-child(2) или p:nth-of-type(2). Попробуем проверить как работают оба варианта:

p:nth-child(2)  {
background-color: khaki; /* устанавливаем цвет заднего фона */
}
p:nth-of-type(2) {
background-color: khaki; /* устанавливаем цвет заднего фона */
}

Что не удивительно оба селектора работают для данной задачи. Но в чём разница?

Давайте рассмотрим на примере, ах да, мы добавим к нашей статье заголовок второго уровня (тег <h3>), про него мы совсем забыли:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Отличие :nth-child() от :nth-of-type()</title>
<style>
p:nth-of-type(2) {
background-color:khaki; /* устанавливаем цвет заднего фона */
}
p:nth-child(2) {
background-color:khaki; /* устанавливаем цвет заднего фона */
}
</style>
</head>
	<body>
		<article>
			<h3>Заголовок второго уровня</h3>
			<p>Первый параграф</p>
			<p>Второй параграф</p>
		</article>
	</body>
</html>

Сразу посмотрите на результат использования обоих селекторов в одном примере, затем будем разбираться почему так происходит:

Пример использования псевдоклассов :nth-of-type() и :nth-child().

В данном примере селектор p:nth-child(2) выбирает второй дочерний элемент своего родителя, а с добавлением заголовка второго уровня (тег <h3>) порядок элементов в родительком элементе изменился и это у нас стал первый абзац, а не второй, что для нас не приемлимо. Для нашей задачи оптимальным выбором является использование селектора с псевдоклассом :nth-of-type() по той причине, что он выбирает второй элемент того же типа, а у нас количество элементов этого типа не изменилось.

CSS селекторы

Nth-child и nth-of-type • Про CSS

:nth-child — один из моих самых любимых селекторов, потому что с помощью него можно делать клевые разноцветные штуки собирать элементы списка в группы произвольной длины и делать с ними разные интересные вещи: от полосатых таблиц до целых разноцветных дизайнов, и все это без необходимости задавать дополнительные классы или как-то менять разметку.

Вот простой пример полосатых таблиц:

Полоски помогают легче скользить глазами по длинной строке или столбцу, это увеличивает читабельность больших таблиц, а сделать это можно всего лишь парой строчек в CSS:

/* Горизонтальные полоски */
TR:nth-child(odd) {
  background: #EEE;
}
/* Вертикальные полоски */
TD:nth-child(odd) {
  background: #EEE;
}

Или вот что можно сделать с обычным списком вроде такого:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Никаких дополнительных классов, все сделано только с помощью :nth-child:

Вот пример разноцветного дизайна для ЖЖ, где используется этот же эффект:

Если у вас есть ЖЖ, вы можете установить этот дизайн из каталога.

Как работает nth-child()?

В круглых скобках задается размер цикла: например (3n) выберет каждый третий элемент. Также можно задать сдвиг вперед или назад: (3n+1) — найдет каждый третий и сделает один шаг вперед, а (3n-2) — два шага назад от найденого. Если размер цикла не задан — (n) — выберутся все элементы списка. Если размер цикла не задан, но задано конкретное число — (5) — выберется элемент списка с этим индексом.

nth-child в своем цикле считает все элементы, находящиеся на одном уровне вложенности относительно родительского элемента.

Селектор работает во всех современных браузерах с поддержкой CSS3.

Примеры

:nth-child(3n)

Выбирает каждый 3-й элемент списка.

:nth-child(3n+1)

Выбирает каждый 3-й элемент списка и делает сдвиг на один шаг вперед. Таким образом можно выбрать первые элементы в каждой группе.

:nth-child(even) = :nth-child(2n)

(even) — ключевое слово, выбирает четные элементы списка, как если бы мы задали (2n).

:nth-child(odd) = :nth-child(2n+1)

(odd) — ключевое слово, выбирает нечетные элементы, как если бы мы задали (2n+1).

:nth-child(3n-1) = :nth-child(3n+2)

Выбирает каждый 3-й элемент списка и делает сдвиг на один шаг назад.

:nth-child(5) = :nth-child(0n+5)

Выберет 5-й элемент списка.

:nth-child(n+6)

Выберет все элементы начиная с 6-го.

:nth-child(-n+6)

Выберет 6 элементов с начала списка.

Сочетания селекторов

:nth-child(n+3):nth-child(-n+8)

Выберет элементы в диапазоне от 3 до 8-ми.

:nth-child(n+4):nth-child(even)

Выберет элементы начиная с 4-го, а потом выделит только четные из них.

:nth-child(3n+1):nth-child(even)

Выберет 1-й, 4-й, 7-й и 10-й элементы, а затем только четные из них.

:nth-child(n+3):nth-child(-n+8):nth-child(even)

Выберет элементы с 3-го по 8-й, а затем только четные из них.

nth-of-type()

Все примеры выше сделаны на основе однородного списка, но что если нам требуется выбрать, например, несколько абзацев в статье, которая содержит не только абзацы, но и заголовки?

Предположим, мы хотим покрасить нечетные абзацы, поэтому напишем что-то вроде:

P:nth-child(odd)

но результат будет каким-то странным (слева), и если попробовать написать то же самое, но без тега (справа) — сразу становится ясно почему:

:nth-child считает все элементы, не обращая внимания на тег, хотя показывает только те, что соответствуют заданному тегу или классу.

Чтобы выбрать только абзацы, нам потребуется другой селектор — :nth-of-type:

:nth-of-type работает также, как :nth-child, но считает только элементы заданного типа.

:nth-child удобно использовать в сочетании с Sass:

С помощью :nth-child одинаковым элементам списка заданы разноцветные рамки и разные фоновые картинки.

Используя широкие возможности этих технологий можно делать не только забавные галереи с котятами, но и прочие нарядные штуки разной степени бесполезности (нажмите Rerun, если анимация застыла):

Здесь с помощью :nth-child элементам списка помимо разноцветных градиентов задаются также задержки воспроизведения анимации, из-за чего фигуры движутся не все вместе, а волнами.

:nth-child — полезный селектор, который поможет добавить разнообразия однотипным элементам сайта и тем самым без особых усилий сделает страницу интереснее для визуального восприятия.

Как выбрать последний второй элемент с помощью CSS

В CSS есть псевдокласс :nth-last-child(), который используется для сопоставления элементов на основе их положения в группе братьев и сестер, и он считается с конца .

В приведенном ниже примере у нас есть несколько элементов

внутри тега
. Чтобы выбрать последний второй
, мы используем единственный аргумент (2) с псевдоклассом :nth-last-child() и добавляем фон, чтобы выделить его.

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

:
 

  <голова>
    Название документа
    <стиль>
      раздел >:nth-last-child(2) {
        фон: светло-зеленый;
      }
    
  
  <тело>
    <раздел>
      
Строка №1

      
Строка №2

      
Строка №3

      
Строка №4

Попробуй сам »

Результат

Строка №1

Линия №2

Линия №3

Линия №4

Давайте посмотрим на другой пример, где у нас есть

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

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

:
 

  <голова>
    Название документа
    <стиль>
      стол {
        граница: 1px сплошной фиолетовый;
      }
      таблица тд {
        отступ: 5px 20px;
      }
      tr: n-последний ребенок (2) {
        вес шрифта: 600;
        цвет: фиолетовый;
        стиль шрифта: курсив;
        размер шрифта: 20px;
      }
    
  
  <тело>
    <таблица>
      <тело>

Попробуй сам »

В следующем примере мы также выбираем последний второй элемент

и указываем его толщину шрифта, цвет, стиль шрифта и размер шрифта.

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

:
 

  <голова>
    Название документа
    <стиль>
      стол {
        граница: 1px сплошной фиолетовый;
      }
      таблица тд {
        отступ: 10px 30px;
      }
      /* Выбирает последние 3 элемента */
      tr:n-последний-потомок(-n+3) {
        цвет фона: #a76db5;
      }
      /* Выбирает каждый элемент, начиная со второго */
      tr: n-последний ребенок (n + 2) {
        черный цвет;
        преобразование текста: верхний регистр;
      }
      tr: n-последний ребенок (2) {
        вес шрифта: 600;
        белый цвет;
        стиль шрифта: курсив;
        размер шрифта: 20px;
      }
    
  
  <тело>
    <таблица>
      <тело>

Попробуй сам »

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

  • :
     

  <голова>
    Название документа
    <стиль>
      уль ли {
        отступ: 5px;
      }
      ul li:nth-last-child(2) {
        вес шрифта: полужирный;
        цвет: коралловый;
        размер шрифта: 18 пикселей;
      }
    
  
  <тело>
    <ул>
      
  • 
        Линия №1
      
    • 
      
  • 
        Линия №2
      
    • 
      
  • 
        Линия №3
      
    • 
      
  • 
        Линия №4
      
    •

    Попробуй сам »

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

    :
     

  <голова>
    Название документа
    <стиль>
      охватывать {
        дисплей: блок;
        отступ: 5px 15px;
      }
      диапазон: n-последний ребенок (2) {
        стиль шрифта: курсив;
        цвет: зеленый;
        размер шрифта: 20px;
      }
    
  
  <тело>
    <р>
      <диапазон>
        Линия №1
      
<диапазон>
Линия №2

<диапазон>
Линия №3

<диапазон>
Линия №4

    Попробуй сам »

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

    :

     

  <голова>
    Название документа
    <стиль>
      п {
        отступ: 5px 15px;
      }
      p: n-последний-ребенок (2) {
        цвет: голубой;
        размер шрифта: 18 пикселей;
      }
    
  
  <тело>
    <дел>
      <р>
        Линия №1
      
    
<р>
Линия №2

    
<р>
Линия №3

    
<р>
Линия №4

    Попробуй сам »

    html css элемент псевдокласс

    Извините за это

    Как мы можем это улучшить?

    Спасибо за отзыв!

    Спасибо за отзыв!

    Считаете ли вы это полезным?

    • Строка №1
    Строка №2
    Строка №3
    Строка №4
    Строка №5
    Строка №1
    Строка №2
    Строка №3
    Строка №4
    Строка №5

    Селектор CSS nth-child [Руководство 2022]

    Сегодня мы изучим некоторые основы CSS. я склоняюсь к nth-child Селекторы CSS в моих статьях.

    Но это заставило меня понять, что я не изучил основы использования селекторов nth-child.

    Сегодня мы рассмотрим возможности этого мощного CSS-селектора на нескольких примерах.

    Базовые селекторы N-го потомка

    Начнем с некоторых базовых селекторов n-го потомка:

    Мы можем определить, какой номер элемента мы хотим выбрать. Допустим, мы хотим выбрать третий элемент списка .

     <ул>
  
  • Элемент 1
    • 
  
  • Элемент 2
    • 
  
  • Элемент 3
    • 
  
  • Элемент 4
    • 
  
  • Элемент 5
    • 
 
     li:nth-child(3) {
  цвет: зеленый;
}

    В результате для стилей выбирается только третий элемент:

    Селектор нечетного/четного

    С помощью этих атрибутов мы можем выбрать каждый нечетный или четный номер элемента.

     li:nth-ребенок(нечетный) {
  красный цвет;
}

    В результате выбираются только нечетные элементы:

     li:nth-child(even) {
  цвет синий;
}

    В этом примере селектор берет все четные элементы HTML и применяет стиль:

    Каждый селектор x

    Что-то классное, что мы можем сделать с селектором nth-child, это выбрать для каждого элемента x . Допустим, нам нужен каждый четвертый элемент:

     li:nth-child(4n) {
  цвет: фиолетовый;
}

    Теперь выбран каждый 4-й дочерний элемент:

    Или, если мы хотим включить первый элемент :

     li:nth-child(4n + 1) {
  цвет: фиолетовый;
}

    Результат:

    Мы также можем начать с второго элемента , например:

     li:nth-child(4n + 2) {
  цвет: фиолетовый;
}

    Результат:

    Выбрать все элементы, кроме первых x элементов

    Мы даже можем использовать селектор, который выбирает все теги, кроме первых трех элементов.

    li: n-й ребенок (n + 4) {
  цвет: бирюзовый;
}

    Результат:

    Выбрать первое x количество элементов

    Еще одна интересная вещь, которую мы можем сделать, это выбрать только первое количество x. Получим первые три элемента:

     li:nth-child(-n + 3) {
  цвет: бирюзовый;
}

    Результат:

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

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

     li:последний ребенок {
  оранжевый цвет;
}

    Результат:

    Мы также можем сместиться, чтобы получить предпоследний элемент списка.

     li:nth-last-child(2) {
  оранжевый цвет;
}

    Результат:

    Комбинирование селекторов

    Мы также можем комбинировать n-дочерние селекторы!

    Допустим, вы хотите получить каждое четное число из нечетного списка.

     <ул>
  
  • Элемент 1
    • 
  
  • Элемент 2
    • 
  
  • Элемент 3
    • 
  
  • Элемент 4
    • 
  
  • Элемент 5
    • 

<ул>
  
  • Элемент 1
    • 
  
  • Элемент 2
    • 
  
  • Элемент 3
    • 
  
  • Элемент 4
    • 
  
  • Элемент 5
    • 

<ул>
  
  • Элемент 1
    • 
  
  • Элемент 2
    • 
  
  • Элемент 3
    • 
  
  • Элемент 4
    • 
  
  • Элемент 5
    • 
 
     ul:nth-child(нечетное) li:nth-child(четное) {
  оранжевый цвет;
}

    Это позволит получить все нечетные теги ul , а затем все четные теги li .

    Результат:

    Посмотрите все примеры в этом Codepen, чтобы попробовать

    Поэкспериментируйте с этим Codepen.

    No related posts.