Содержание

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

CSS селекторы

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

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

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

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

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 селекторы

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

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

Последнее обновление: 21.04.2016

Особую группу псевдоклассов образуют псевдоклассы, которые позволяют выбрать определенные дочерние элементы:

  • :first-child: представляет элемент, который является первым дочерним элементом

  • :last-child: представляет элемент, который является последним дочерним элементом

  • :only-child: представляет элемент, который является единственным дочерним элементом в каком-нибудь контейнере

  • :only-of-type: выбирает элемент, который является единственным элементом определенного типа (тега) в каком-нибудь контейнере

  • :nth-child(n): представляет дочерний элемент, который имеет определенный номер n, например, второй дочерний элемент

  • :nth-last-child(n): представляет дочерний элемент, который имеет определенный номер n, начиная с конца

  • :nth-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер

  • :nth-last-of-type(n): выбирает дочерний элемент определенного типа, который имеет определенный номер, начиная с конца

Псевдокласс first-child

Используем псевдокласс first-child для выбора первых ссылок в блоках:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			a:first-child{
			
				color: red;
			}
        </style>
    </head>
    <body>
		<h4>Планшеты</h4>
		<div>
			<a>Microsoft Surface Pro 4</a><br/>
			<a>Apple iPad Pro</a><br/>
			<a>ASUS ZenPad Z380KL</a>
		</div>
		<h4>Смартфоны</h4>
		<div>
			<p>Топ-смартфоны 2016</p>
			<a>Samsung Galaxy S7</a><br/>
			<a>Apple iPhone SE</a><br/>
			<a>Huawei P9</a>
		</div>
    </body>
</html>

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

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

А во втором блоке первым элементом является параграф, поэтому ни к одной ссылке не применяется стиль.

Псевдокласс last-child

Используем псевдокласс last-child:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			a:last-child{
			
				color: blue;
			}
        </style>
    </head>
    <body>
		<h4>Смартфоны</h4>
		<div>
			<a>Samsung Galaxy S7</a><br/>
			<a>Apple iPhone SE</a><br/>
			<a>Huawei P9</a>
		</div>
		<h4>Планшеты</h4>
		<div>
			<a>Microsoft Surface Pro 4</a><br/>
			<a>Apple iPad Pro</a><br/>
			<a>ASUS ZenPad Z380KL</a>
			<p>Данные за 2016</p>
		</div>
    </body>
</html>

Селектор a:last-child определяет стиль для ссылок, которые являются последними дочерними элементами.

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

Селектор only-child

Селектор :only-child выбирает элементы, которые являются единственными дочерними элементами в контейнерах:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
		p:only-child{
			color:red;
		}
        </style>
    </head>
    <body>
		<h3>Заголовок</h3>
		<div>
			<p>Текст1</p>
		</div>
		<div>
			<p>Текст2</p>
			<p>Текст3</p>
		</div>
		<div>
			<p>Текст4</p>
		</div>
	</body>
</html>

Параграфы с текстами «Текст1» и «Текст4» являются единственными дочерними элементами в своих внешних контейнерах, поэтому к ним применяется стиль — красный цвет шрифта.

Псевдокласс only-of-type

Псевдокласс only-of-type выбирает элемент, который является единственным элементом определенного типа в контейнере. Например, единственный элемент div, при этом элементов других типов в этом же контейнере может быть сколько угодно.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
		span:only-of-type{
		
			color: green;	/* зеленый цвет */
		}
		p:only-of-type{
		
			color: red;	/* красный цвет */
		}
		div:only-of-type{
		
			color: blue;	/* синий цвет */
		}
        </style>
    </head>
    <body>
		<div>
			Header
		</div>
		<p>Единственный параграф и <span>элемент спан</span></p>
		<div>
			Footer
		</div>
	</body>
</html>

Хотя для элементов div определен стиль, он не будет применяться, так как в контейнере body находится два элемента div, а не один. Зато в body есть только один элемент p, поэтому он получит стилизацию. И также в контейнере p есть только один элемент span, поэтому он также будет стилизован.

Псевдокласс nth-child

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

Например, стилизуем четные и нечетные строки таблицы:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
			tr:nth-child(odd) { background-color: #bbb; }
			tr:nth-child(even) { background-color: #fff; }
        </style>
    </head>
    <body>
		<h4>Смартфоны</h4>
		<table>
			<tr><td>Samsung</td><td>Galaxy S7 Edge</td><td>60000</td></tr>
			<tr><td>Apple</td><td>iPhone SE</td><td>39000</td></tr>
			<tr><td>Microsoft</td><td>Lumia 650</td><td>13500</td></tr>
			<tr><td>Alcatel</td><td>Idol S4</td><td>30000</td></tr>
			<tr><td>Huawei</td><td>P9</td><td>60000</td></tr>
			<tr><td>HTC</td><td>HTC 10</td><td>50000</td></tr>
			<tr><td>Meizu</td><td>Pro 6</td><td>40000</td></tr>
			<tr><td>Xiaomi</td><td>Mi5</td><td>35000</td></tr>
		</table>
    </body>
</html>

Чтобы определить стиль для нечетных элементов, в селектор передается значение «odd»:

tr:nth-child(odd){}

Для стилизации четных элементов в селектор передается значение «even»:

tr:nth-child(even){}

Также в этот селектор мы можем передать номер стилизуемого элемента:

tr:nth-child(3) { background-color: #bbb; }

В данном случае стилизуется третья строка.

Еще одну возможность представляет использование заменителя для номера, который выражается буквой n:

tr:nth-child(2n+1) { background-color: #bbb; }

Здесь стиль применяется к каждой второй нечетной строке.

Число перед n (в данном случае 2) представляет тот дочерний элемент, который будет выделен следующим. Число, которое идет после знака плюс, показывают, с какого элемента нужно начинать выделение, то есть, +1 означает, что нужно начинать с первого дочернего элемента.

Таким образом, в данном случае выделение начинается с 1-го элемента, а следующим выделяется 2 * 1 + 1 = 3-й элемент, далее 2 * 2 + 1 = 5-й элемент и так далее.

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

tr:nth-child(3n+2) { background-color: #bbb; }

Псевдокласс :nth-last-child по сути предоставляет ту же самую функциональность, только отсчет элементов идет не с начала, а с конца:


tr:nth-last-child(2) { 
	background-color: #bbb; /* 2 строка с конца, то есть предпоследняя  */
}
tr:nth-last-child(2n+1) {  
	background-color: #eee; /* нечетные строки, начиная с конца  */
}

Псевдокласс nth-of-type

Псевдокласс :nth-of-type позволяет выбрать дочерний элемент определенного типа по определенному номеру:


tr:nth-of-type(2) { 
	background-color: #bbb;
}

Аналогично работает псевдокласс nth-last-of-type, только теперь отсчет элементов идет с конца:


tr:nth-last-of-type(2n) { 
	background-color: #bbb;
}

child() | HTML и CSS с примерами кода

Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

Псевдоклассы

Синтаксис

/* Выбирает каждый четвёртый элемент
   среди любой группы соседних элементов */
:nth-child(4n) {
  color: lime;
}

Значения

odd
Все нечётные номера элементов.
even
Все чётные номера элементов.
<число>
Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
<выражение>
Задаётся в виде an±b, где a и b — целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2…
Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

Результат для различных значений псевдокласса

ЗначениеНомера элементовОписание
11Первый элемент, является синонимом псевдокласса :first-child
55Пятый элемент
2n2, 4, 6, 8, 10,…Все чётные элементы, аналог значения even
2n+11, 3, 5, 7, 9,…Все нечётные элементы, аналог значения odd
3n3, 6, 9, 12, 15,…Каждый третий элемент
3n+22, 5, 8, 11, 14,…Каждый третий элемент, начиная со второго
n+44, 5, 6, 7, 8,…Все элементы, кроме первых трёх
-n+33, 2, 1Первые три элемента
5n-23, 8, 13, 18, 23,…—
even2, 4, 6, 8, 10,…Все чётные элементы
odd1, 3, 5, 7, 9,…Все нечётные элементы

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

:nth-child(n + 2):nth-child(-n + 5) {
  /* … */
}

Спецификации

Примеры

Пример 1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>nth-child</title>
    <style>
      table {
        width: 100%; /* Ширина таблицы */
        border-spacing: 0; /* Расстояние между ячейками */
      }
      tr:nth-child(2n) {
        background: #f0f0f0; /* Цвет фона */
      }
      tr:nth-child(1) {
        background: #666; /* Цвет фона */
        color: #fff; /* Цвет текста */
      }
    </style>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>&nbsp;</td>
        <td>2134</td>
        <td>2135</td>
        <td>2136</td>
        <td>2137</td>
        <td>2138</td>
      </tr>
      <tr>
        <td>Нефть</td>
        <td>16</td>
        <td>34</td>
        <td>62</td>
        <td>74</td>
        <td>57</td>
      </tr>
      <tr>
        <td>Золото</td>
        <td>4</td>
        <td>69</td>
        <td>72</td>
        <td>56</td>
        <td>47</td>
      </tr>
      <tr>
        <td>Дерево</td>
        <td>7</td>
        <td>73</td>
        <td>79</td>
        <td>34</td>
        <td>86</td>
      </tr>
      <tr>
        <td>Камни</td>
        <td>23</td>
        <td>34</td>
        <td>88</td>
        <td>53</td>
        <td>103</td>
      </tr>
    </table>
  </body>
</html>

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

Пример 2

HTML
<h4>
  <code>span:nth-child(2n+1)</code>, БЕЗ элемента
  <code>&lt;em&gt;</code> в группе элементов-потомков.
</h4>
<p>Элементы 1, 3, 5 и 7 будут выбраны.</p>
<div>
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br />

<h4>
  <code>span:nth-child(2n+1)</code>, С элементом
  <code>&lt;em&gt;</code> в группе элементов-потомков.
</h4>
<p>
  Элементы 1, 5 и 7 будут выбраны.<br />
  3 используется в подсчёте потому что это элемент-потомок,
  но он не выбран потому что он не
  <code>&lt;span&gt;</code>.
</p>
<div>
  <span>Span!</span>
  <span>Span</span>
  <em>Это `em`. </em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br />

<h4>
  <code>span:nth-of-type(2n+1)</code>, С элементом
  <code>&lt;em&gt;</code> в группе элементов-потомков.
</h4>
<p>
  Элементы 1, 4, 6 и 8 будут выбраны.<br />
  3 не используется в подсчёте и не выбран, потому что это
  <code>&lt;em&gt;</code>, но не <code>&lt;span&gt;</code>,
  а <code>nth-of-type</code> выбирает только потомков этого
  типа. Элемент <code>&lt;em&gt;</code> полностью
  пропускается и игнорируется.
</p>
<div>
  <span>Span!</span>
  <span>Span</span>
  <em>Это `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>
CSS
html {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

. first span:nth-child(2n + 1),
.second span:nth-child(2n + 1),
.third span:nth-of-type(2n + 1) {
  background-color: lime;
}
Результат

См. также

Ссылки

Как работает nth-child — Веб-стандарты. Как работает CSS-селектор nth-child Css четные элементы

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

Tr:nth-child (odd) { // background color } tr:nth-child (even) { // another background color }

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

Tr:nth-child (an+b) { }

Здесь a определяет количество элементов в группе, а b определяет, какой элемент из группы будет выбран. Если использовать значение 2n+1 , то элементы будут разделены на группы по два, и будут выбраны первые элементы каждой группы, т. е., элементы с нечетным порядковым номером. Если использовать значение 2n+2 , то элементы снова будут разделены на группы по два, но теперь будут выбраны вторые элементы каждой группы, т. е., элементы с четным порядковым номером.

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

Tr:nth-child (4n+4 ) { // задаем стили каждому четвертому элементу }

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

Использование псевдокласса CSS:nth-child для выбора единственного элемента

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

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

#selector_example li:nth-child (4 ) { font-size:150

Использование псевдокласса CSS:nth-child для выбора всех элементов, кроме первых пяти

Если задать псевдоклассу:nth-child значение в виде n+ число, можно выбрать все элементы, начиная с элемента с этим порядковым номером:

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

#selector_example li:nth-child (n+6 ) { font-size:150 %; font-weight:bold ; color:green ; }

Использование псевдокласса CSS:nth-child для выбора только первых пяти элементов

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

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

#selector_example li:nth-child (-n+5 ) { font-size:150 %; font-weight:bold ; color:green ; }

Использование псевдокласса CSS:nth-child для выбора каждого третьего элемента

Псевдокласс:nth-child можно использовать, чтобы выбрать последовательность элементов, задавая, сколько элементов в последовательности и порядковый номер нужного элемента. Если задать значение 3n+1 , будет выбран каждый третий элемент, начиная с первого:

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

#selector_example li:nth-child (3n+1 ) { font-size:150 %; font-weight:bold ; color:green ; }

Использование псевдокласса CSS:nth-child для выбора только нечетных элементов

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

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

#selector_example li:nth-child (odd) { font-size:150 %; font-weight:bold ; color:green ; }

Использование псевдокласса CSS:nth-child для выбора только четных элементов

Этот пример показывает то же, что и прошлый, но на этот раз выбраны все элементы с четными порядковыми номерами. Т.е., второй, четвертый, шестой, восьмой, десятый и т. д. элементы:

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

#selector_example li:nth-child (even) { font-size:150 %; font-weight:bold ; color:green ; }

Использование псевдокласса CSS:first-child для выбора первого элемента

Другой псевдокласс:first-child выберет первый элемент:

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

#selector_example li:first-child { font-size:150 %; font-weight:bold ; color:green ; }

Использование псевдокласса CSS:last-child для выбора последнего элемента

Кроме псевдокласса:first-child есть псевдокласс:last-child, который выберет последний элемент из группы элементов:

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

#selector_example li:last-child { font-size:150 %; font-weight:bold ; color:green ; }

Использование псевдокласса CSS:nth-last-child для выбора предпоследнего элемента

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

Элемент 1
Элемент 2
Элемент 3
Элемент 4
Элемент 5
Элемент 6
Элемент 7
Элемент 8
Элемент 9
Элемент 10

#selector_example li:nth-last-child (2 ) { font-size:150 %; font-weight:bold ; color:green ; }

Ознакомьтесь с возможностями псевдокласса:nth-child с помощью «

Описание

Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

Синтаксис

элемент:nth-child(odd | even | | ) {…}

Значения

odd Все нечетные номера элементов. even Все четные номера элементов. число Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке. выражение Задается в виде an+b , где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2. ..

Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.

HTML5 CSS3 IE Cr Op Sa Fx

nth-child
21342135213621372138
Нефть1634627457
Золото469725647
Дерево773793486
Камни23348853103

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

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

Ul li:nth-child(3n+3) { color: #ccc; }

Вышеприведённый CSS делает следующее: применяет стиля для каждого третьего элемента ненумерованного списка. А именно 3-го, 6-го, 9-го, 12-го и т.д. Но как это работает? А также какую выгоду можно извлечь используя nth-child ?

Основной смысл заключается в выражении в скобках. nth-child принимает два ключевых слова: even (чётный) и odd (нечётный). Смысл их абсолютно ясен. Even выбирает чётные элементы (2, 4, 6), odd — нечётные (1, 3, 5).

Как показано в примере выше, nth-child может обрабатывать выражения. Какое самое простое возможное выражение? Просто число. Если вы напишите какое-нибудь число в скобках, то будет выбран один единственный элемент. Например, выберем пятый элемент списка:

Ul li:nth-child(5) { color: #ccc; }

Вернёмся к нашему первому примеру, в котором мы использовали выражение (3n+3). Как он работает? Почему он выбирает каждый третий элемент? Вся суть в переменной n. Она принимает целые значения от нуля и больше. Давайте рассмотрим подробнее:

(3 x 0) + 3 = 3 = 3-ий элемент (3 x 1) + 3 = 6 = 6-ой элемент (3 x 2) + 3 = 9 = 9-ый элемент и т.д.

Теперь попробуем следующее выражение: nth-child(2n+1) :

(2 x 0) + 1 = 1 = 1-ый элемент (2 x 1) + 1 = 3 = 3-ий элемент (2 x 2) + 1 = 5 = 5-ый элемент и т.д.

В итоге получили тоже самое что и в случае с odd , таким образом нет нужды часто использовать такое выражение. Более того, наш первый пример тоже можно упростить и использовать вместо оригинального выражения (3n+3), выражение (3n):

(3 x 0) + 0 = 0 = нет соответствия (3 x 1) + 0 = 3 = 3-ий элемент (3 x 2) + 0 = 6 = 6-ой элемент и т.д.

Как видите, результат тот же, но не надо писать «+3». Также мы можем использовать отрицательные значения в выражении. Например, 4n-1:

(4 x 0) — 1 = -1 = нет соответствия (4 x 1) — 1 = 3 = 3-ий элемент (4 x 2) — 1 = 7 = 7-ой элемент и т. д.

Использование отрицательных значений для коэффициента при n, выглядит слегка странно, потому что в случае отрицательного результата не будет найдено соответствие. Вам надо будет постоянно изменять выражение, чтобы добавить положительных элементов. Как оказалось, этот подход очень удобен для выбора первых n элементов. Рассмотрим пример с «-n+3»:

0 + 3 = 3 = 3ий элемент -1 + 3 = 2 = 2-ой элемент -2 + 3 = 1 = 1-ый элемент -3 + 3 = 0 = нет соответствия

Кроссбраузерность

nth-child является одним из тех самых несчастных атрибутов, которые являются полностью кроссбраузерными, за исключением абсолютного нуля в IE, даже 8-ой версии. Поэтому, когда речь заходит о его использовании, то если ожидаемый результат — это в некотором роде визуальный эффект (например раскраска строк некой таблицы), то это идеальный подход. Но, вероятно, не стоит использовать его для чего-то более важного, что может повлиять, например, на корректность вёрстки.

Конечно, если вы используете jQuery, то вам не стоит переживать по этому поводу, так как jQuery работает даже в Internet Explorer.

Ну и напоследок

Вы можете поиграть с различными выражениями для селектора на

Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

Обозначения

ОписаниеПример
Указывает тип значения.
A && BЗначения должны выводиться в указанном порядке. &&
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,]*
+Повторять один или больше раз.+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.{1,4}
#Повторять один или больше раз через запятую.#
×

Значения

odd Все нечётные номера элементов. even Все чётные номера элементов. Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке. Задаётся в виде an±b , где a и b — целые числа, а n — счётчик, который автоматически принимает значение 0, 1, 2…

Если a равно нулю, то оно не пишется и запись сокращается до b . Если b равно нулю, то оно также не указывается и выражение записывается в форме an . a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счёт использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

В табл. 1 приведены некоторые возможные выражения и ключевые слова, а также указано, какие номера элементов будут задействованы.

Табл. 1. Результат для различных значений псевдокласса
ЗначениеНомера элементовОписание
11Первый элемент, является синонимом псевдокласса :first-child .
55Пятый элемент.
2n2, 4, 6, 8, 10,…Все чётные элементы, аналог значения even .
2n+11, 3, 5, 7, 9,…Все нечётные элементы, аналог значения odd .
3n3, 6, 9, 12, 15,…Каждый третий элемент.
3n+22, 5, 8, 11, 14,…Каждый третий элемент, начиная со второго.
n+44, 5, 6, 7, 8,…Все элементы, кроме первых трёх.
-n+33, 2, 1Первые три элемента.
5n-23, 8, 13, 18, 23,…—
even2, 4, 6, 8, 10,…Все чётные элементы.
odd1, 3, 5, 7, 9,…Все нечётные элементы.

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

:nth-child(n+2):nth-child(-n+5) { … }

Пример

nth-child
21342135213621372138
Нефть1634627457
Золото469725647
Дерево773793486
Камни23348853103

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

Рис. 1. Применение псевдокласса:nth-child к строкам таблицы

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor»s draft (Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации ) — первая черновая версия стандарта.
×

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

Псевдоклассы:first-child и first-of-type в чем разница?

Для того, чтобы в css обратиться к первому элементу из родительского контейнера, были придуманы два псевдокласса. Я сразу же предлагаю рассмотреть все на примере, чтобы вы поняли:

Это абзац

Это абзац

Это абзац

Это абзац

Это абзац

Допустим, имеем такую разметку. Цель – обратиться к первому абзацу и стилизовать его отдельно от других без дописывания ему классов. Это можно сделать так:

#wrapper p:first-child{
Color: red;
}

Цвет первого абзаца станет красным, можете проверить.

#wrapper p:first-of-type{
color: red;
}

Произойдет то же самое. Так в чем же разница? А она заключается в том, что псевдокласс first-of-type ищет и находит первый элемент родителя, учитывая его тип, а first-child ничего не ищет – он просто берет первый попавшийся элемент родителя и если это абзац, то применяет к нему стили. Если нет, то ничего не выберется и не применится.

Это абзац

Это абзац

Это абзац

Это абзац

Это абзац

А теперь подумайте: сработает ли в этом случае first-of-type ? Да, потому что он учитывает тип элемента и выберет именно первый абзац, а не первый из вообще всех элементов. А first-child сработает? Попробуйте. Ничего не получится, потому что абзац не стоит первым элементом в родителе.

Лично я не сразу понял разницу между этими псевдоклассами и какое-то время путался, но сейчас, я надеюсь, нормально вам объяснил.

Еще важная деталь

Отсчет элементов идет именно от родительского элемента, поэтому если вы указали так:

Li:first-of-type{
…
}

То выбран будет первые пункты списков в теге body (то есть на всей странице). Таким образом, в любом списке первый пункт будет оформляться по-другому.
Если же написать так:

#sidebar li:first-of-type{
…
}

То выбраны будут только первые пункты списков в сайдбаре, то есть боковой колонке на нашем сайте.

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

Кстати, я забыл упомянуть о противоположных псевдоклассах – last-child (и last-of-type соответственно). Они позволяют выбрать последний элемент из родительского контейнера.

Где вы можете использовать на практике

Я пишу об этих псевдоклассах потому, что они активно используются при верстке с помощью css. Вот есть у вас на странице, например, блок похожих записей, или комментариев, или еще чего. И у вас возникла идея как-то по особенному оформить его первый элемент. А может, последний. Да и вообще любой можно.

Вам всего лишь нужно узнать название блока, в котором хранится нужный элемент. Допустим, имеем дело с популярными записями. Родительский контейнер имеет класс popular. Тогда пишем так:

Popular li:first-of-type{
Padding-top: 20px;
}

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

Вот еще такой пример. У меня в теге body всего три одинаковых серых блока. Напишем так.

Тематические материалы:

Обновлено: 20.04.2021

103583

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

: nth-child() псевдокласс не работает в списке



Я делаю мобильное меню, но: nth-child pseudoclass здесь не работает -это HTML:

<div>
            <ul>
                <a href="#"><li>Home</li></a>
                <a href="#"><li>O Mnie</li></a>
                <a href="#"><li>Kontakt</li></a>
                <a href="#"><li>Oferta</li></a>
            </ul>
</div>

А вот CSS от стилуса:

.menuelement
        width 100%
        height 20px
        color #fbfbfb
        border 1px solid #DA2825
        padding 15px 0 15px 0
    .menuelement:nth-child(1)
        border-bottom 0
        border-left 0
        border-right 0
    .menuelement:nth-child(2)
        border-left 0
        border-right 0
        border-bottom 0
    .menuelement:nth-child(3)
        border-left 0
        border-right 0
        border-bottom 0
    .menuelement:nth-child(4)
        border-left 0
        border-right 0
        border-bottom 0

Когда я применяю изменения к первому ребенку, они применяются к каждому ребенку вместо первого.

html css stylus
Поделиться Источник Unknown     06 мая 2017 в 07:16

2 ответа

  • css выберите: nth-of-child(1) не работает

    поэтому я пытаюсь сделать так, чтобы первая широкая коробка под недавними рекламными акциями (внизу) имела большую высоту, чем rest из коробок, однако nth-of-child не работает, мне просто нужно это для этой первой широкой коробки. вот код: #listify_widget_recent_listings-2…

  • nth-child() не работает

    У меня есть один вопрос о nth-child() и nth-of-type() , я пробовал оба варианта, но ни один не работает. Вот мой код: #commentdamcherirounded:nth-child(odd) { border-radius:4px; -moz-border-radius:4px; -o-border-radius:4px; -webkit-border-radius:4px; -khtml-border-radius:4px; width:680px;…


2

: nth-child() псевдокласс работает в списке

Ваш HTML ошибается. <UL> должен содержать <li> , а <li> может содержать <a>

И не уверен насчет вашего CSS, но у него должны быть некоторые из этих { и некоторые из этих } , и утверждения хотят : в середине и ; в конце.

.menuelement a {
    color: inherit;
}
.menuelement {
    color: purpleblue;
}
.menuelement:nth-child(1) {
    color: fuchsia;
}
.menuelement:nth-child(2) {
    color: orange;
}
.menuelement:nth-child(3) {
    color: green;
}
.menuelement:nth-child(4) {
    color: red;
}
<div>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">O Mnie</a></li>
            <li><a href="#">Kontakt</a></li>
            <li><a href="#">Oferta</a></li>
        </ul>
    </div>

Поделиться caramba     06 мая 2017 в 07:19


0

добавьте это ниже css кода для меню

<style type="text/css">
    .mobilemenu ul li{
        color: purpleblue;
        width: 100%;
        height: 20px;
        border: 1px solid #DA2825;
        padding: 15px 0 15px 0;
        border-bottom: 0;
        border-left: 0;
        border-right: 0;
    }
    .mobilemenu ul li:nth-child(2) {
        color: orange;
    }
    .mobilemenu ul li:nth-child(3) {
        color: green;
    }
    .mobilemenu ul li:nth-child(4) {
        color: red;
    }
    </style>
    <div>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">O Mnie</a></li>
                <li><a href="#">Kontakt</a></li>
                <li><a href="#">Oferta</a></li>
            </ul>
     </div>

Поделиться Shital Marakana     06 мая 2017 в 07:29

Похожие вопросы:


Сложный селектор не работает в последней версии blink: nth-child(2): nth-last-child(2){}

есть странная проблема: после мигания update selector .groups .group:nth-child(2):nth-last-child(2){} просто перестает работать. Но он все еще хорошо работает в webkit и gecko. Есть идеи, как это…


Использование :nth-child и :nth-last-child одновременно

Я не могу заставить псевдоклассы :nth-child и :nth-last-child работать одновременно. Работает хорошо (выделяет первые 3 элемента): #a li:nth-child(-n+3) { background: #fbfcc8; } Работает хорошо…


Multiple nth-last-child и / или last-child не работают

НЕ РАБОТАТЬ : td:not(:last-child), td:not(:nth-last-child(2)) { background-color:#ccc; } НЕ РАБОТАТЬ : td:not(:nth-last-child(1)), td:not(:nth-last-child(2)) { background-color:#ccc; } НЕ РАБОТАТЬ :…


css выберите: nth-of-child(1) не работает

поэтому я пытаюсь сделать так, чтобы первая широкая коробка под недавними рекламными акциями (внизу) имела большую высоту, чем rest из коробок, однако nth-of-child не работает, мне просто нужно это…


nth-child() не работает

У меня есть один вопрос о nth-child() и nth-of-type() , я пробовал оба варианта, но ни один не работает. Вот мой код: #commentdamcherirounded:nth-child(odd) { border-radius:4px;…


CSS как использовать псевдокласс: not with :nth-child

Можно ли использовать :not() с nth-child ? Я попробовал что-то подобное, но безуспешно : td:not(:nth-child(4n)){ text-align:center; } Однако это похоже работает : td:not(:first-child){…


:nth-child не работает для заголовков виджетов WordPress

Я пытаюсь использовать псевдокласс :nth-child, чтобы придать каждому заголовку виджета боковой панели уникальный цвет фона и значок рядом с текстом заголовка. На данный момент он отображает цвет…


Как использовать: nth-last-child в IE8?

У меня есть этот CSS ниже, но он не работает на IE8. Я знаю, что CSS3 не работает на IE8. Я хотел бы попробовать что-то вроде div:first-child + div + div , но это не работает. Я думаю, что это не…


применение nth-child не работает

Почему nth-child(n) здесь не работает? Больше детей можно добавить в HTML , но я думаю, что это не очень хороший способ добавить те же правила (тот же код), используя nth-of-type(1),…


Псевдокласс ‘nth-child()’ не работает с ‘:hover»

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

Псевдокласс ‘nth-child()’ не работает с ‘:hover»



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

ul {
    background-color: white;
    text-decoration: none;
    padding: 0;
    margin: 0 auto;
}
ul li {
    margin: 0 2em;
    display: inline-block;
    padding: 0;
    list-style: none;
}
ul li a {
    text-decoration: none;
    color: black;
}
a:nth-child(2){
color: green;
}
<ul>
      <li><a href="#">Easy</a></li>
      <li><a href="#">Medium</a></li>
      <li><a href="#">Hard</a></li>
      <li><a href="#">Insane</a></li>
</ul>
html css
Поделиться Источник Tony     06 сентября 2020 в 02:20

2 ответа


3

Это потому, что a не является 2 — м ребенком- это единственный ребенок его родителя li . То, что вы ищете, является a дочерним элементом 2-го элемента li . Вы можете получить это вот так:

li:nth-child(2) a{ color: green; }

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

// When the <a> in the second li is hovered, change it's colour
li:nth-child(2) a:hover{ color: green; }

/* OR */ 

/* When the second li is hovered, change the colour of the <a> it contains */
li:nth-child(2):hover a{ color: green; }

Рабочий пример (используя различные цвета, чтобы показать, что он работает):

ul {
    background-color: white;
    text-decoration: none;
    padding: 0;
    margin: 0 auto;
}
ul li {
    margin: 0 2em;
    display: inline-block;
    padding: 0;
    list-style: none;
}
ul li a {
    text-decoration: none;
    color: black;
}

/* change colour of 2nd link */
li:nth-child(2) a{
    color: blue;
}

/* change colour of 2nd link on hover */
li:nth-child(2):hover a{
    color: green;
}

/* change colour of 3rd link on hover */
li:nth-child(3) a:hover{
    color: red;
}
<ul>
      <li><a href="#">Easy</a></li>
      <li><a href="#">Medium</a></li>
      <li><a href="#">Hard</a></li>
      <li><a href="#">Insane</a></li>
</ul>

Ссылка : Mozilla MDN Docs for nth-child

Поделиться FluffyKitten     06 сентября 2020 в 02:23

Поделиться Daham Akalanka     06 сентября 2020 в 04:40

Похожие вопросы:


: псевдокласс hover не работает с универсальным селектором *

Если я напишу h2:hover, li:hover {color:green;} Как h2 и элементы ли получить Hover эффект. Баф если я напишу: *:hover {color: green;} Это действует только на якорные элементы. Разве псевдокласс…


: nth-child() псевдокласс не работает в списке

Я делаю мобильное меню, но: nth-child pseudoclass здесь не работает -это HTML: <div id=mobilemenu class=mobilemenu> <ul> <a href=#><li…


css: псевдокласс hover не работает

У меня есть псевдокласс CSS :hover , который не дает никаких результатов. Я возился с каким-то кодом галереи изображений, и мне удалось получить этот фрагмент, который не работает. Я не могу понять…


Как использовать nth-child with: hover для стилизации нескольких детей?

JS Fiddle для облегчения отладки: http://jsfiddle.net/GregsFiddle/WyC7Y/1 / Я пытаюсь настроить этот css так, чтобы при наведении курсора мыши на девять, девять и ниже их цвет bg менялся. При…


Изменение других детей при наведении курсора nth-child(1)

У меня есть 4 дива (. box), которые являются детьми одного родителя div (. cont) CSS .cont{ width: 100%; height: auto; } .box{ width: 25%; color: #fff; text-align: center; padding: 50px 0;…


nth-child() не работает

У меня есть один вопрос о nth-child() и nth-of-type() , я пробовал оба варианта, но ни один не работает. Вот мой код: #commentdamcherirounded:nth-child(odd) { border-radius:4px;…


CSS как использовать псевдокласс: not with :nth-child

Можно ли использовать :not() с nth-child ? Я попробовал что-то подобное, но безуспешно : td:not(:nth-child(4n)){ text-align:center; } Однако это похоже работает : td:not(:first-child){…


:nth-child не работает для заголовков виджетов WordPress

Я пытаюсь использовать псевдокласс :nth-child, чтобы придать каждому заголовку виджета боковой панели уникальный цвет фона и значок рядом с текстом заголовка. На данный момент он отображает цвет…


выберите child div с nth-child и примените hover

Я пытаюсь заставить nth-child работать над набором divs, а затем применить к нему hover псевдо: <div class=uk-home-button> <div> <div class=uk-panel-box></div> </div>…


css nth-child first n selector не работает с состоянием наведения курсора

У меня есть 9 дивов внутри гибкого контейнера. То, что я пытаюсь достичь, — это эффект, когда div, над которым вы парите, ‘pushes’ divs справа дальше вправо, а divs слева дальше влево. Я хотел бы…

псевдокласс CSS, odd, even, первый элемент, каждый второй, третий, четные и нечетные элементы

Автор Андрей На чтение 3 мин. Просмотров 358 Опубликовано

Псевдокласс CSS :nth-child позволяет вам выбрать один или несколько элементов в соответствии с их порядком следования на странице в соответствии с формулой. Некоторые примеры:

/* Выбрать первый элемент списка */
li:nth-child(1) { }

/* Выбрать 5-й элемент списка */
li:nth-child(5) { }

/* Нечетные элементы начиная с первого */
li:nth-child(odd) { }

/* Выбрать каждый третий элемент списка начиная с первого */
li:nth-child(3n - 2) { }

/* Выбрать каждый 3-й элемент списка начиная со 2-го */
li:nth-child(3n - 1) { }

/* Каждый 3-й элемент, имеющий класс "el" */
.el:nth-child(3n) { }

/* Кроме первого элемента */
:nth-child(n+2) { }

/* Первые три элемента */
:nth-child(-n+3) { }

Допустимые значения псевдокласса

Значение, указываемое в скобках, означает номера элементов, которым будет присвоен определенный стиль, и может быть задан одним из следующих способов:

  • слово odd – указание всех нечетных элементов-наследников;
  • even – указание всех четных элементов;
  • положительное целое число – указание одного элемента;
  • формула вида an + b, в которой – указание группы элементов, члены которой выбираются  с определенной периодичностью – где a, b – целые числа, n – счетчик, которому поочередно присваиваются целые положительные значения начиная с 0. Если n = 0, то an не указываются, a и b могут быть отрицательными.

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

Обратиться к нечетным элементам можно как значением – odd, так и с помощью формулы 2n+1. Точно так же even можно заменить формулой 2n (каждый второй).

На примере мы сделали таблицу, где для четных элементов установили голубой фон для строк, а для нечетных – светло-зеленый.

See the Pen
nth-child by Андрей (@adlibi)
on CodePen.

Несмотря на то что n может быть любым натуральным числом, учитываются лишь результаты вычисления формулы, равные существующим номерам тегов, то есть с #1 по номер, равный числу элементов – наследников данного родителя.

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

/* выбор второй, третьей и четвертой ячеек строки*/
td :nth-child(n+2):nth-child(-n+4)

или

/* выбор четных ячеек начиная с четвертой */
td:nth-child(n+4):nth-child(even)

А вот цепочка из трех псевдоклассов:

/* происходит отбор четных тегов между 4-м и 12-м включительно */
:nth-child(n+4):nth-child(even):nth-child(-n+12)

Например, требуется назначить определенный стиль для пятой, седьмой и девятой строк таблицы. Для этого нужно объединить три псевдокласса:

tr :nth-child(-n+9) :nth-child(n+5) :nth-child(odd)

Особенности использования

Задавать стиль через псевдокласс :nth-child() можно двумя способами

  • указывая тип выделяемого элемента: tr :nth-child(2n);
  • записывая без селектора: :nth-child(-n+3).

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

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

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

На такой случай в CSS припасен другой инструмент, который учитывает теги только определенного типа. Это :nth-of-type(), еще один псевдокласс. То есть если у вас в списке элементы разного типа, и вы хотите выбрать по определенному правилу только элементы какого-то одного типа, используйте nth-of-type вместо nth-child.

Селекторы псевдоклассов — Мастерская по макету CSS

Селектор псевдокласса действует так, как если бы вы добавили класс к элементу в вашей разметке.

Мастерская по макету CSS: селекторы псевдоклассов

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

  a: ссылка {}
а: посетил {}

Эти селекторы работают так, как если бы они добавляли класс в зависимости от состояния ссылки. В этом случае независимо от того, посещена ли ссылка или нет.

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

  a: наведение {}
a: active {}
а: фокус {}

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

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

: первенец

Нацельте на элемент, когда он является первым дочерним элементом родительского элемента.

Селектор first-child был частью CSS2.1. В этом примере у нас есть набор абзацев.

  


 Абзац первый. 


 Абзац второй.

Чтобы применить CSS только к первому абзацу внутри оболочки , мы используем селектор first-child.

  .wrapper p: first-child {}

Это работает, только если есть элемент абзаца как первый элемент непосредственно внутри этого контейнера. Если мы добавим здесь заголовок первого уровня, то селектор first-child больше не будет выбирать абзац.

: последний ребенок

Нацелить элемент, когда он является последним дочерним элементом родительского элемента.

Спецификация Selectors Level 3 принесла нам несколько новых селекторов псевдокласса. Селектор last-child похож на first-child, за исключением того, что он нацелен на последнего дочернего элемента родителя.

  .wrapper p: last-child {}

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

: ребенок

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

Селектор nth-child действительно очень полезен. Простым примером является использование этого селектора для чередования строк таблицы.

  <таблица>
  
     Имя 
     Любимый цвет 
     Любимое животное 
  
  
     Рэйчел 
     Фиолетовый 
     Кот 
  
    
     Джо 
     Розовый 
     Альбатрос 
  
    
     Элоиза 
     Зеленый 
     Слаг

Мы можем применить CSS к нечетным строкам с помощью следующего селектора.

  tr: nth-child (нечетный) {}

Или четных строк:

  tr: nth-child (четный) {}

Эти ключевые слова — не единственный способ использовать nth-child. Мы можем настроить таргетинг на конкретную строку. Этот селектор только выберет строку 2.

  tr: nth-child (2) {}

Значение ключевого слова odd равно этому селектору, в котором мы выбираем первый элемент и каждый второй элемент после него.

  tr: nth-child (2n + 1) td {}

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

: nth-of-type

Выберите несколько элементов в соответствии с их положением в дереве документа, НО только те элементы, которые совпадают с типом, к которому применяется правило.

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

В моем примере ниже показаны заголовки и абзацы.

Чтобы применить CSS ко всем остальным абзацам, но игнорировать заголовки, я мог бы использовать следующий селектор.

  p: nth-of-type (нечетное) {}

: единственный ребенок

Псевдокласс only-child будет соответствовать, если элемент является единственным дочерним элементом родительского — например, список только с одним элементом списка.

  li: только ребенок {}

Это может быть полезным селектором при проектировании переменного количества контента, поступающего из CMS.

: пусто

Пустой псевдокласс будет соответствовать, если элемент полностью пуст или содержит только HTML-комментарий.

  п: пусто {}

Не будет совпадать, если внутри элемента есть пробелы.

Пустой псевдокласс будет соответствовать первым двум, но не последнему абзацу.

: не

Псевдокласс , а не позволяет вам что-то делать, если селектор не совпадает.Селектор, который вы хотите исключить, находится внутри круглых скобок. В приведенном ниже примере мы делаем шрифт жирным, если он не находится внутри td с классом animal .

  td: not (.animal) {
  font-weight: жирный;
}

: first-child,: last-child,: nth-child и: not (: nth-child)

Селектор : nth-child одновременно мощный и простой в использовании.Это позволяет нам нацеливать определенные элементы в зависимости от их порядка по отношению друг к другу. Мы можем нацеливаться на что-то простое, например, 4-го ребенка, или что-то более сложное, например, на каждого 5-го ребенка, начиная со 2-го (2, 7, 12, 17,…). Зная основы, вы сможете писать мощный, быстрый, эффективный, расширяемый и умный CSS.

Использование селектора : nth-child часто помогает устранить необходимость в таких классах, как .item - last или .item - clear . Если вам нужно стилизовать итеративным способом, вы можете сохранить все стили, содержащиеся в вашем CSS, вместо добавления дополнительных классов в ваш HTML.

Лучше всего то, что селектор : nth-child был добавлен в CSS3 и поддерживается всеми основными браузерами. Это означает, что мы можем использовать его, не опасаясь проблем с поддержкой браузера.

Вот структура селектора : nth-child : an + b

  • (a) — Целое число, которое обеспечивает контекст для итерации (n)
  • (п) — Буква «н» буквально
  • (+/-) — Может быть «+» или «-» для построения селектора.
  • (b) — целое число, обеспечивающее контекст в начальной точке.

Вот пример реального селектора : nth-child : 3n — 2

  • а = 3
  • n = n
  • +/- = —
  • b = 2

Давайте повеселимся!

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

: первенец

Позволяет нам выбрать первого брата или сестру в группе

: последний ребенок

Позволяет нам нацеливаться на последнего брата или сестру в группе

: nth-ребенок (3n)

Позволяет нам нацеливаться на каждого третьего брата или сестру в группе

: n-й ребенок (n + 2)

Позволяет нам нацеливаться на всех братьев и сестер в группе, начиная со второго брата

: n-й ребенок (3n + 2)

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

: nth-ребенок (-n)

Позволяет нам настроить таргетинг на всех братьев и сестер в группе, начиная с 0-го места и работая в обратном направлении (это не нацелено на каких-либо братьев и сестер, поскольку вы не можете работать в обратном направлении с 0-го места, поскольку нет -1-го брата)

: nth-ребенок (-n + 9)

Позволяет нам нацеливаться на каждого брата или сестру в группе, начиная с 9-го места и работая в обратном направлении

: nth-ребенок (-3n + 9)

Позволяет нам нацеливаться на каждого третьего брата или сестру в группе, начиная с 9-го места и работая в обратном направлении

: not (: nth-child (4n))

Позволяет нам нацеливаться на каждого брата или сестру, который не является 4-м братом в группе

Использование селектора : nth-child может поднять ваш CSS на новый уровень.Это помогает вам писать организованный, эффективный и расширяемый код.

Если вам нужно больше, вы можете ознакомиться со спецификацией, узнать больше из MDN или поэкспериментировать со своими рецептами.

CSS Nth Child: Полное руководство: Полное руководство

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

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

Вот здесь и появляется псевдокласс CSS: nth-child. Псевдокласс: nth-child сопоставляет элементы на основе их положения в списке элементов на HTML-странице.

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

Псевдоклассы CSS

Найди свой матч на тренировочном лагере