Nth child четные: CSS псевдокласс nth-child. Как выбрать все четные элементы списка, таблицы, блока, и.т.д.

Leave a Comment / Разное / By /

CSS псевдокласс nth-child. Как выбрать все четные элементы списка, таблицы, блока, и.т.д.

Иногда, при оформлении страниц, хочется немного «автоматизировать» стили CSS.

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

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

Мне бы хотелось рассказать о методе, который основывается на использовании псевдокласса nth-child.

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

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

Есть несколько вариантов, как это можно реализовать. Давайте их разберем.

1 вариант. Использовать параметр even. 

Предположим, что у нас есть вот такой список:

<ul>
            <li>Элемент 1</li>
            <li>Элемент 2</li>
            <li>Элемент 3</li>
            <li>Элемент 4</li>
            <li>Элемент 5</li>
            <li>Элемент 6</li>
            <li>Элемент 7</li>
            <li>Элемент 8</li>
            <li>Элемент 9</li>
            <li>Элемент 10</li>
</ul>

Чтобы выделить красным цветом все четные элементы в этом списке, нужно добавить стиль CSS:

ul li:nth-child(even) {color:#F00;}

В итоге, получиться следующая картина.

Even – это ключевое слово, которое означает, что будут выбраны четные элементы.

Красивое решение, не правда ли? Всего одна строка CSS стилей.

2 вариант. Использовать параметр 2n. 

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

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

<table>
  <tr>
    <td>Столбец 1</td>
    <td>Столбец 2</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>9</td>
  </tr>
</table>

И стили CSS

tr:nth-child(2n) {color:#F00;}

Текст в каждом четном элементе tr стал красным.

Псевдокласс nth-child — n-ный потомок родителя

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

Синтаксис

селектор:nth-child(число | odd | even | выражение) { }

Значения

ЗначениеОписание
число Положительное число начиная с 1. Задает номер элемента, к которому мы хотим обратиться. Нумерация элементов начинается с 1.
oddНечетные элементы.
evenЧетные элементы.
выражение Можно составлять специальные выражения с буквой n, которая обозначает все целые числа от нуля (не от единицы!) до бесконечности. Так, 2n — значит все четные числа (начиная со второго).
Как это понять? Подставляем в n последовательно числа от 0 и так далее: если n = 0, то 2n даст 0 — такого элемента нет (нумерация элементов с 1!), если n = 1, то 2n даст 2 — второй элемент, если n = 2, 2n дает 4 — четвертый элемент. Если написать 3n — это будет каждый третий элемент (начиная с третьего!), и так далее.

Пример

В данном примере мы сделаем красного цвета тот li, который является 4-тым потомком своего родителя (4-тым внутри ol):

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>li:nth-child(4) { color: red; }

:

Пример

Сейчас красными сделаем все четные li:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>

li:nth-child(even) { color: red; }

:

Пример

Сейчас красными сделаем все нечетные li:

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>li:nth-child(odd) { color: red; }

:

Пример

Сейчас красными сделаем каждую третью li (начиная с третьей):

<ul> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ul>li:nth-child(3n) { color: red; }

:

Пример

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

Допустим, у вас есть список из 20 элементов и нужно выбрать элементы с 7 по 14 включительно. Это можно сделать вот так:

<ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol>

li:nth-child(n+7):nth-child(-n+14) { color: red; }

:

Селектор CSS :nth-child() — GeeksforGeeks

Улучшить статью

Сохранить статью

  • Последнее обновление: 22 авг, 2022

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

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

    Синтаксис: 

     :nth-child(число) {
    // Свойство CSS
}

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

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

    Пример 1: В этом примере выбран каждый нечетный абзац. Используется формула 2n+1, т.е. выбираются 1, 3, 5 и т. д. абзацы.

    HTML

    < html >

    < Head >

    < название > CSS: NTH-Child Selector 9 900 98 0000009009. 00000000000000009009те . стиль >

         p:nth-child(2n+1) {

             фон: зеленый;

             цвет: белый;

         }

         style >

    head >

     

    < body style = "text-align:center" >

         < h2 стиль = "color:green;" >

                 GeeksforGeeks

             h2 >

         < h3 >

                 CSS :nth-child Selector

            h3 >

          

    <
      0 > Портал компьютерных наук для гиков. P >

      < P > Geeks Class of Antryly. >

      Body >

      HTML >

      HTML > 3 HTML > 3 .0278

    Выход:

    Пример 2: В этом примере выбирается каждый ровный

  • , т.е. 2, 4, 6 и т. Д. DOCTYPE html>

    < html >

     

    < head >

         < title >CSS :nth-child Selector Название >

    < Стиль >

    LI {

    ;

    }

    LI: Nth-Child (даже) {

    Фон: зеленый;

             цвет: белый;

         }

         style >

    head >

     

    < body style = "Text-Align: Center" >

    < H3 >

    CSS: NTH-Child Selecter CSS: NTH-Child

    0060

             h3 >

          

     

    < p >Sorting Algorithms p >

     

     

         < ul >

             < li >Быстрая сортировка.

      0li>

      < LI > Сорт.

      < LI > Сорт.0059 >

      body >

       

      html >

      Output:

      Supported Browsers: The browser :nth-child() Селектор перечислены ниже:

      • Google Chrome 1.0
      • Microsoft Edge 12.0
      • Firefox 3.5
      • Opera 9.5
      • Apple Safari 3.1

      Статьи по теме

      css - tr:nth-child(even) help. как поступить в один класс?

      спросил

      Изменено 5 лет, 11 месяцев назад

      Просмотрено 20 тысяч раз

      Я не очень хорошо разбираюсь в CSS, и мне нужна помощь.

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

      Я добавил код в CSS:

       tr:nth-child(even) {
фон: #CCC;
}
tr: n-й ребенок (нечетный) {
фон: #FFF;
}

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

       таблица.dashboardtable
      • css
      • css-selectors
      • css-tables

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

       table.dashboardtable tr:nth-child(even)
table.dashboardtable tr:nth-child(нечетный)

      2

      nth-child и nth-of-type принимают нечетные и четные , а также формулу вида an+b , где a и b являются константами.

    • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *