Псевдокласс CSS :nth-child()

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

Значение :nth-child() может быть задано числом, ключевым словом или формулой.

Ключевые значения

odd

Определяет элементы, порядковый номер которых является нечётным (например, 1, 3, 5, 7 и т. д.).

even

Определяет элементы, порядковый номер которых является чётным (например, 2, 4, 6, 8 и т. д.).

Функциональная нотация

<An+B>

Определяет элементы, порядковый номер которых соответствует шаблону An+B (для каждого неотрицательного целого значения n). Индекс первого элемента равен 1, а n в формуле начинается с 0. Значения A и B должны быть целыми числами.

Версия

Selectors Level 4

Selectors Level 3

Синтаксис

Синтаксис CSS :nth-child()

css

:nth-child() {
  css declarations;
}

Пример использования селектора :nth-child:

:nth-child() пример кода

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-child(3) {
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>:nth-child selector example</h2>
    <div>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <p>Paragraph 3</p>
      <p>Paragraph 4</p>
    </div>
  </body>
</html>

Try it Yourself »

Пример использования ключевых слов "odd" и "even":

CSS :nth-child() odd, even

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-child(odd) {
        background: #1c87c9;
        color: #eeeeee;
      }
      p:nth-child(even) {
        background: #666666;
        color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
  </body>
</html>

Try it Yourself »

Практика

Какова функция селектора nth-child() в CSS?

Селектор nth-child() в CSS соответствует каждому элементу, который является n-м дочерним элементом своего родителя, независимо от типа.Селектор nth-child() применяется только к дочерним элементам определённого типа.Селектор nth-child() используется для выбора n-го брата элемента.Селектор nth-child() может принимать аргумент, представляющий целое число, нечётные или чётные числа, или выражение (n+an+b).Селектор nth-child() может использоваться для выбора элемента на основе атрибутов его родителя.

Псевдокласс CSS :nth-child() ​

Ключевые значения ​

odd ​

even ​

Функциональная нотация ​

<An+B> ​

Версия ​

Синтаксис ​

Пример использования селектора :nth-child: ​

Пример использования ключевых слов "odd" и "even": ​

Практика ​