Как работает nth-child — Веб-стандарты

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

ul li:nth-child(3n+3) {
    color: #cccccc;
}

Что делает 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: #cccccc;
}

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

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

А как насчёт :nth-child(2n+1)?

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

Так, стоп! Это ведь то же самое, что и odd. Тогда, возможно, не стоит использовать это выражение? Но разве в этом случае мы не подвергаем наш первый пример излишнему усложнению? Что, если вместо 3n+3 мы запишем 3n+0 или ещё проще 3n?

  • (3 × 0) = 0 = ничего нет
  • (3 × 1) = 3 = 3-й элемент
  • (3 × 2) = 6 = 6-й элемент
  • (3 × 3) = 9 = 9-й элемент и т.
    д.

Итак, как вы можете видеть, результат получится такой же, а значит, нет необходимости в +3. Мы можем использовать и отрицательные значения n, с таким же успехом, как и вычитание в уравнениях. Например, 4n-1:

  • (4 × 0) – 1 = –1 = ничего нет
  • (4 × 1) – 1 = 3 = 3-й элемент
  • (4 × 2) – 1 = 7 = 7-й элемент и т.д.

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

n элементов, например так: -n+3:

  • –0 + 3 = 3 = 3-й элемент
  • –1 + 3 = 2 = 2-й элемент
  • –2 + 3 = 1 = 1-й элемент
  • –3 + 3 = 0 = ничего нет и т.д.

На SitePoint есть хороший справочник с милой табличкой, которую я бесстыдно опубликую здесь:

n2n+14n+14n+44n5n-2-n+3
0114––3
1358432
2591881
371111–
4917201618–
51121242023–

Поддержка браузерамиСкопировать ссылку

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

Спасением здесь может послужить библиотека jQuery, которая реализует поддержку всех CSS-селекторов, включая :nth-child, даже в Internet Explorer.

Всё равно неясно?Скопировать ссылку

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

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

Псевдоклассы nth-child и nth-last-child, Определенные номера, Нечётные или Чётные

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

Содержание:

  1. Нечётные
  2. Чётные
  3. Определенные номера
  4. Каждый третий элемент
  5. Один через три
  6. Два через два
  7. Два через три
  8. Три через три
  9. Первые десять
  10. Диапазон
  11. Все, кроме последнего
  12. Последний элемент
  13. Последние три элемента

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

Пример

Так и выражение, которое задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2 и т.д.

Значения odd и even, которые определяют четные и нечетные элементы.

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

Нечётные

Все нечётные номера элементов: 1, 3, 5, 7…


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 30

Чётные

Чётные номера элементов: 2, 3, 6, 8…


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 30

Определенные номера

Пример группировки псевдоклассов и выбор элементов 2, 4, 6, 9.


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 30

Каждый третий элемент

Элементы 3, 6, 9, 12…


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 30

Один через три

Элементы 1, 5, 9, 13. ..


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 30

Два через два

Элементы 1, 2, 5, 6, 9, 10…


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 30

Два через три

Элементы 1, 2, 6, 7, 11, 12. ..


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 30

Три через три

Элементы 1, 2, 3, 7, 8, 9…


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 30

Первые десять

Первые десять элементов 1-10


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 30

Диапазон

C третьего по пятнадцатый:


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 30

Все, кроме последнего

Все элементы, кроме последнего:


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 30

Последний элемент

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


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 30

Последние три элемента

Выбор 3-х последних элементов


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 30

Дополнительную информацию по псевдоклассам nth-child и nth-last-child можно прочитать здесь

Помогла ли вам статья?

348 раз уже помогла

Комментарии: (0)

Сопоставление элементов в CSS с :nth-child и другими селекторами

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

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

Мы покроем:

  • :nth-child селектор
  • :селектор n-го типа
  • :nth-last-child селектор
  • :nth-last-of-type селектор

К концу этой статьи вы будете хорошо понимать, как использовать эти селекторы для более эффективного оформления и компоновки веб-страниц. Если вы только начинаете работать с CSS или уже являетесь опытным профессионалом, стремящимся вывести свои навыки на новый уровень, в этом блоге есть кое-что для вас.

Начнем!

:nth-child селектор

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

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

Синтаксис использования селектора :nth-child следующий:

 элемент:nth-child(n) {
  /* правила стиля */
}

В приведенном выше синтаксисе селектора :nth-child :

  • элемент — это HTML-элемент, который вы хотите выбрать и стилизовать
  • n — позиция элемента в списке дочерних элементов
    • Должно быть целым положительным числом
    • Не будет соответствовать ни одному элементу, если его значение отрицательное или нулевое

Например, li:nth-child(1) выберет первый дочерний элемент, li:nth-child(2) выберет второй дочерний элемент и так далее. Вы можете увидеть это в действии в CodePen ниже:

См. пример селектора Pen :nth-child от Rishi Purwar (@rishi111)
на CodePen.

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

В дополнение к целым числам мы также можем использовать формулы для выбора элементов через определенные промежутки времени. Наиболее распространенная формула: + b , где a и b — целые числа:

.
  • значение представляет интервал выбора элементов
  • b Значение представляет элемент, который начинается с
  • n значение может быть любым неотрицательным числом или нулем; его значение начинается с нуля

Давайте попробуем понять эту формулу более ясно, используя следующий пример:

 li:nth-ребенок(2n+1)

В приведенном выше примере мы установили значение a в формуле как 2 , что означает, что селектор :nth-child будет выбирать каждый второй элемент в списке дочерних элементов. Значение b в формуле равно 1 , что означает, что селектор будет начинаться с первого элемента в списке.

Например, рассмотрим следующий код HTML:

 <ул>
  
  • Список 1
    • 
  
  • Список 2
    • 
  
  • Список 3
    • 
  
  • Список 4
    • 
  
  • Список 5
    • 
  
  • Список 6
    •

    Поскольку значение n начинается с 0 , применение li:nth-child(2n+1) к приведенному выше HTML-коду выберет следующие дочерние элементы:

    • Если n = 0 , то 2 x 0 + 1 = 1 , что выбирает первый элемент в списке
    • Если n = 1 , то 2 x 1 + 1 = 3 , что выбирает третий элемент в списке
    • Если n = 2 , то 2 x 2 + 1 = 5 , который выбирает пятый элемент в списке

    Следовательно, селектор li:nth-child(2n+1) выберет первый, третий и пятый li элементов в списке. Вы можете увидеть это в действии в CodePen ниже:

    См. пример формулы селектора Pen :nth-child от Rishi Purwar (@rishi111)
    на CodePen.

    Вы можете использовать эту формулу и + b для выбора элементов с разными интервалами и начальными точками, изменяя значения а и б . Например:

    • li:nth-child(3n+2) выберет каждый третий элемент, начиная со второго элемента
    • li:nth-child(4n+3) выберет каждый четвертый элемент, начиная с третьего элемента

    Проверьте CodePen ниже, чтобы увидеть это в действии:

    См. демонстрацию различных значений формулы селектора Pen:nth-child от Rishi Purwar (@rishi111)
    на CodePen.

    Обратите внимание, что в приведенном выше примере две 9Правила селектора 0005 li:nth-child совпадают на одиннадцатом элементе li . Поскольку правила, которые появляются позже в коде, переопределяют более ранние правила того же типа, в этом случае «Список 11» получил желтый цвет фона.

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

    Проверьте CodePen ниже для некоторых примеров:

    См. селектор Pen :nth-child с использованием нечетных и четных ключевых слов от Rishi Purwar (@rishi111)
    на CodePen.

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

    :nth-child шпаргалка по селектору

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

    :селектор n-го типа

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

    Вот синтаксис селектора :nth-of-type :

     :n-й тип(n) {
  /* здесь находятся правила стиля */
}

    См. пример использования селектора :nth-of-type в CodePen ниже:

    См. пример селектора Pen:nth-of-type от Rishi Purwar (@rishi111)
    на CodePen.

    В приведенном выше примере h3:nth-child(2) 9Селектор 0006 не выберет «Заголовок 3», поскольку он не является вторым дочерним элементом своего родителя. Поскольку правило :nth-child рассматривает все элементы независимо от указанного типа, первый тег h2 будет в этом случае первым дочерним элементом, поэтому в качестве второго дочернего элемента выбирается «Заголовок 2»:

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

     h3: n-й ребенок (3) {
  красный цвет;
}

    С другой стороны, селектор h3:nth-of-type(2) выберет второй тег h3 , поскольку он рассматривает только элементы указанного типа при поиске второго тега h3 в родительском контейнере. . В результате этот селектор не считает тег h2 первым дочерним элементом, а тег p — последним дочерним элементом.

    Другими словами, h3:nth-of-type(2) 9Селектор 0006 выберет второй тег h3 , если он является вторым элементом указанного типа в родительском контейнере, независимо от его положения:

    :nth-last-child селектор

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

    Вот синтаксис для использования селектора :nth-last-child :

     элемент: n-последний ребенок (n) {
  /* Здесь идут стили */
}

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

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

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

    Вы можете увидеть несколько примеров использования селектора :nth-last-child в CodePen ниже:

    См. пример селектора Pen :nth-last-child от Rishi Purwar (@rishi111)
    на CodePen.

    :nth-last-of-type селектор

    Селектор :nth-last-of-type в CSS используется для выбора элементов, которые являются nth дочерними элементами своего родителя, считая от последнего дочернего элемента. Этот селектор выбирает только элементы того же типа, что и выбранный элемент.

    Вот синтаксис для селектора :nth-last-of-type :

     :n-последний-типа(n) {
  /* здесь находятся правила стиля */
}

    В этом селекторе CSS n может быть целым числом, ключевым словом, таким как «четный» или «нечетный», или формулой.

    Некоторые примеры использования селектора :nth-last-of-type :

    См. примеры селектора Pen:nth-last-of-type от Rishi Purwar (@rishi111)
    на CodePen.

    Теперь вам может быть интересно, в чем разница между селекторами :nth-last-child и :nth-last-of-type .

    Основное различие между ними состоит в том, что :nth-last-of-type 9Селектор 0006 более специфичен. Другими словами, селектор :nth-last-of-type рассматривает только указанный тип элемента, тогда как селектор :nth-last-child рассматривает все типы элементов.

    Давайте попробуем понять эту разницу с помощью кода ниже:

     <дел>
   
    Заголовок 1
     
   
    Заголовок 2
     
   
    Заголовок 3
     
   
    Заголовок 4
      
   
    Заголовок 5
      
  
    Абзац 1

    В этом сценарии селектор :nth-last-child будет считать тег p последним потомком. Итак, допустим, вы хотите выбрать предпоследний тег h3 «Заголовок 4», используя селектор :nth-last-child следующим образом:

     h3:n-последний-потомок(2)

    Приведенный выше код не выберет «Заголовок 4», поскольку он не является предпоследним дочерним элементом своего родителя. Вместо этого в качестве предпоследнего дочернего элемента будет выбран «Заголовок 5»:

    С другой стороны, h3:nth-last-of-type(2) правильно выберет предпоследний тег h3 «Заголовок 4», поскольку будет искать только элементов h3 — указанного типа — внутри родительского контейнера. В результате он не считает тег p последним дочерним элементом, а тег h2 — первым дочерним элементом.

    В случае nth-last-of-type(2) не имеет значения, в какой позиции находится целевой элемент в родительском контейнере, если это предпоследний элемент указанного типа:

    См. приведенный ниже пример CodePen, чтобы увидеть, какой элемент выбран с помощью h3:nth-last-of-type(2) по сравнению с h3:nth-last-child(2) :

    См. Разницу пера между селекторами :nth-last-child и :nth-last-of-type от Rishi Purwar (@rishi111)
    на CodePen.

    Заключение

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

    Конкретно мы рассмотрели :nth-child , :nth-last-child , :nth-of-type и :nth-last-of-type селекторы. Эти селекторы CSS позволяют нам выбирать элементы на основе их положения в родительском контейнере или заданного типа.

    Напомню, основные моменты этого поста в блоге:

    • Селектор :nth-child выбирает элемент на основе его положения в родительском контейнере, независимо от его типа
    • : n-й тип 9Селектор 0006 выбирает элемент на основе его положения в родительском контейнере, но только если он имеет определенный тип
    • Селектор :nth-last-child выбирает элемент на основе его положения в родительском контейнере, считая от последнего дочернего элемента, независимо от его типа
    • Селектор :nth-last-of-type выбирает элемент на основе его положения в родительском контейнере, считая от последнего дочернего элемента, но только если он имеет определенный тип

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

    Спасибо, что нашли время прочитать эту статью. Если вам понравилось читать, возникли какие-либо проблемы при прочтении или у вас есть дополнительные вопросы, дайте мне знать в разделе комментариев. Не забудьте нажать кнопку «Поделиться», если вам нравится то, что я здесь делаю, и вы хотите помочь мне продолжать это делать.

    Ваш интерфейс загружает ЦП ваших пользователей?

    Поскольку веб-интерфейсы становятся все более сложными, ресурсоемкие функции требуют от браузера все большего и большего. Если вы заинтересованы в мониторинге и отслеживании использования процессора на стороне клиента, использования памяти и многого другого для всех ваших пользователей в рабочей среде, попробуйте LogRocket.https://logrocket.com/signup/

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

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

    css - Почему селектор :nth-child(2) работает с тем, что я ожидаю от :first-child?

    спросил

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

    Просмотрено 4к раз

    У меня есть пример того, что я пытаюсь спросить.

    Я часто использую такой формат. Я ожидаю, что смогу выбрать этот первый div с набором полей div:first-child {} , но кажется, что он захвачен только вторым дочерним селектором. Я бы ожидал, что «поле 1» будет красным, а не синим. С точки зрения семантики (по крайней мере, для меня) имеет больше смысла говорить «стилизовать первый div в наборе полей вот так» вместо того, чтобы говорить о втором.

    Почему это происходит и есть ли способ добиться желаемого эффекта (чтобы иметь возможность вызывать div:first-child)?

    • css
    • css-selectors

    Селектор :nth-child игнорирует тип элементов. div:nth-child(2) выбирает

    , который является вторым потомком.

    Если вы хотите выбрать первый div, используйте селектор :nth-of-type(1) или :first-of-type .

    1

    В этом случае <легенда> , предшествующая первому div, является фактическим :first-child их общего родителя. Вы можете рассмотреть возможность использования селектора :nth-of-type .

    Скрипка здесь

    0

    Вот объяснение того, как работает селектор :nth-child:

    Этот псевдокласс сопоставляет элементы на основе их положения в списке дочерних элементов родительского элемента. Псевдокласс принимает аргумент N, который может быть ключевым словом, числом или числовым выражением в форме an+b. Дополнительные сведения см. в разделе Общие сведения о выражениях псевдокласса :nth-child.

    Если N является числом или числовым выражением, :nth-child(N) соответствует элементам, которым предшествуют N-1 одноуровневые элементы в дереве документа.

    Следующие примеры селекторов эквивалентны и будут соответствовать строкам таблицы с нечетными номерами:

     тр:n-й ребенок (2n+1) {
  ⋮ декларации
}
tr: n-й ребенок (нечетный) {
  ⋮ декларации
}

    Этот пример селектора будет соответствовать первым трем строкам любой таблицы:

     тр:n-й ребенок (-n+3) {
  ⋮ декларации
}

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

     p:nth-ребенок(1) {
  ⋮ декларации
}

    Это, конечно, эквивалентно селектору p:first-child.

    Примечание.

    No related posts.