Child second css: css — select second child

Leave a Comment / Css / By /

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

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

Псевдоклассы
  • :active
  • :any-link
  • :blank
  • :checked
  • :current()
  • :default
  • :defined
  • :dir()
  • :disabled
  • :empty
  • :enabled
  • :first
  • :first-child
  • :first-of-type
  • :focus
  • :focus-visible
  • :focus-within
  • :fullscreen
  • :future
  • :has()
  • :host
  • :host()
  • :host-context()
  • :hover
  • :indeterminate
  • :in-range
  • :invalid
  • :is()
  • :lang()
  • :last-child
  • :last-of-type
  • :left
  • :link
  • :local-link
  • :not()
  • :nth-child()
  • :nth-col()
  • :nth-last-child()
  • :nth-last-col()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :past
  • :placeholder-shown
  • :read-only
  • :read-write
  • :required
  • :right
  • :root
  • :scope
  • :target
  • :target-within
  • :user-invalid
  • :valid
  • :visited
  • :where()

Синтаксис

/* Выбирает каждый четвёртый элемент
   среди любой группы соседних элементов */
: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) {
  /* … */
}

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

  • Selectors Level 4
  • Selectors Level 3

Примеры

Пример 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

HTMLCSSРезультат

<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>

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-of-type
  • :nth-last-child

Ссылки

  • Псевдо-класс :nth-child MDN (рус.)

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

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

Try it

Syntax

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

:nth-last-child( <nth> [ of <complex-selector-list> ]? )

Keyword values

odd

Представляет элементы,у которых числовое положение в серии братьев и сестер нечетное:1,3,5 и т. д.,считая от конца.

even

Представляет элементы,числовое положение которых в серии братьев и сестер равномерно:2,4,6 и т.д.,считая от конца.

Functional notation

<An+B>

Представляет элементы, чье числовое положение в серии элементов одного уровня соответствует шаблону An+B для каждого положительного целого или нулевого значения n . Индекс первого элемента, считая с конца, равен 1 . Значения A и B должны быть оба <integer> с.

Examples

Example selectors

tr:nth-last-child(odd) или tr:nth-last-child(2n+1)

Представляет нечетные строки таблицы HTML:1,3,5 и т.д.,считая от конца.

tr:nth-last-child(even) или tr:nth-last-child(2n)

Представляет четные строки HTML-таблицы:2,4,6 и т. д.,считая от конца.

:nth-last-child(7)

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

:nth-last-child(5n)

Представляет элементы 5,10,15 и т.д.,считая от конца.

:nth-last-child(3n+4)

Представляет элементы 4,7,10,13 и т.д.,считая от конца.

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

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

p:nth-last-child(n) или p:nth-last-child(n+1)

Представляет каждый элемент <p> среди группы братьев и сестер. Это так же, как простой p селектор. (Поскольку n начинается с нуля, а последний элемент начинается с единицы, n и n+1 выберут одинаковые элементы.)

p:nth-last-child(1) или p:nth-last-child(0n+1)

Представляет каждый <p> , который является первым элементом среди группы братьев и сестер, считая с конца. Это то же самое, что и селектор :last-child .

Table example

HTML
<table>
  <tbody>
    <tr>
      <td>First line</td>
    </tr>
    <tr>
      <td>Second line</td>
    </tr>
    <tr>
      <td>Third line</td>
    </tr>
    <tr>
      <td>Fourth line</td>
    </tr>
    <tr>
      <td>Fifth line</td>
    </tr>
  </tbody>
</table>
CSS
table {
  border: 1px solid blue;
}
/ * Выбирает последние три элемента * /
tr:nth-last-child(-n+3) {
  background-color: pink;
}
/ * Выбирает каждый элемент, начиная со второго до последнего * /
tr:nth-last-child(n+2) {
  color: blue;
}
/ * Выбираем только последний второй элемент * /
tr:nth-last-child(2) {
  font-weight: 600;
}
Result

Quantity query

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

HTML
<h5>A list of four items (styled):</h5>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ol>
<h5>A list of two items (unstyled):</h5>
<ol>
  <li>One</li>
  <li>Two</li>
</ol>
CSS
/ * Если есть по крайней мере три элемента списка, стилизуем их все * /
li:nth-last-child(n+3),
li:nth-last-child(3) ~ li {
  color: red;
}
Result

Specifications

Specification
Селекторы уровня 4
# nth-last-child-pseudo

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox для AndroidOpera AndroidSafari на IOSSamsung Internet
:nth-last-child

4

12

3. 5

9

9

3.1

≤37

18

4

10.1

2

1.0

no_parent_required

57

79

52

No

44

No

57

57

52

43

No

7.0

of_syntax

No

См. Ошибку 304163 .

No

См. Ошибку 304163 .

No

Смотрите ошибку 854148 .

No

No

См. Ошибку 304163 .

9

No

См. Ошибку 304163 .

No

См. Ошибку 304163 .

No

Смотрите ошибку 854148 .

No

См. Ошибку 304163 .

9

No

См. Ошибку 304163 .

See also

  • :nth-child, :nth-last-of-type
  • Количество запросов для CSS
  • 1
  • …
  • 74
  • 75
  • 76
  • 77
  • 78
  • …
  • 865
  • Next

:nth-last-col


css — выберите второго ребенка

спросил

Изменено 4 года, 7 месяцев назад

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

Я пытаюсь использовать это, чтобы выбрать второй тег из списка:

 . container li a:first-child + a { ... }

, но это не работает. Есть ли другой, идеально чистый способ CSS (кроме a:nth-child(2) ) или кто-нибудь может увидеть, где я ошибся?

  • css
  • css-селекторы

2

Убедитесь, что ваш

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

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

  • , используйте этот селектор:

     .container li a:nth-of-type(2)

    Если ваш

  • будет иметь ровно 2 элемента , вы можете использовать общий комбинатор родственных элементов ~ для дополнительной поддержки IE7/IE8:

     . container li a ~ a

    Или вы имели ввиду найти элемент во втором

  • , а не второй элемент в
  • (поскольку «список», вероятно, относится к
    • <дел>
    Заголовок
    Рисунок 1

    Абзац

    Нижний колонтитул
    <дел>
    Заголовок

    Абзац

    Рисунок 1
    <час>
    Рисунок 2

    Абзац

    Абзац

    Нижний колонтитул

    Что выбрано, что нет и почему?

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

      • это второй потомок своего родителя;
      • это элемент p ; и
      • это второй элемент p внутри своего родителя.

    2. Выбрано p:nth-child(2) only
      Этот второй потомок является элементом p , поэтому он соответствует p:nth-child(2) .

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

    3. Выбрано p:nth-of-type(2) 9Только 0016
      Этот элемент p является вторым элементом p после элемента выше, но это третий дочерний элемент, что позволяет ему соответствовать p:nth-of-type(2) , но не p:nth- ребенок(2) . Помните, опять же, что у родительского элемента может быть только один дочерний элемент, соответствующий :nth-child(X) для определенного X за раз — предыдущий p уже занимает :nth-child(2) в контексте данного родительского элемента.

    4. Не выбрано
      Этот элемент p является единственным в родительском элементе и не является его вторым дочерним элементом. Следовательно, он не соответствует ни :nth-child(2) , ни :nth-of-type(2) (даже если он не определен селектором типа; см. ниже).

    5. Выбрано .parent > :nth-of-type(2)
      Этот элемент является вторым элементом своего типа в родительском элементе.