Wybierz każdy N-ty element w CSS

242

Czy można wybrać, powiedzmy, co czwarty element w zestawie elementów?

Np .: Mam 16 <div>elementów ... Mógłbym napisać coś takiego.

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)

czy jest na to lepszy sposób?

css css-selectors

— Derek Adair
źródło

1

Mam nadzieję, że wszyscy wciąż żyją, tylko dla początkujących, a nie dla początkujących, nawet wybierz ilość co n elementów i trudniejszych rzeczy: nthmaster.com

— gengns 21.02.19

419

Jak sama nazwa wskazuje, pozwala konstruować wyrażenie arytmetyczne przy użyciu zmiennej oprócz stałych liczb. Możesz wykonywać dodawanie ( ), odejmowanie ( ) i mnożenie współczynników ( gdzie jest liczbą całkowitą, w tym liczbami dodatnimi, liczbami ujemnymi i zerem).:nth-child()n+-ana

Oto jak przepisałbyś powyższą listę selektorów:

div:nth-child(4n)

Aby uzyskać wyjaśnienie działania tych wyrażeń arytmetycznych, zobacz moją odpowiedź na to pytanie , a także specyfikację .

Zauważ, że ta odpowiedź zakłada, że wszystkie elementy podrzędne w obrębie tego samego elementu nadrzędnego są tego samego typu elementu, div. Jeśli masz inne elementy różnych typów, takie jak h1lub p, musisz użyć :nth-of-type()zamiast, :nth-child()aby upewnić się, że liczysz tylko divelementy:

<body>
  <h1></h1>
  <div>1</div>  <div>2</div>
  <div>3</div>  <div>4</div>
  <h2></h2>
  <div>5</div>  <div>6</div>
  <div>7</div>  <div>8</div>
  <h2></h2>
  <div>9</div>  <div>10</div>
  <div>11</div> <div>12</div>
  <h2></h2>
  <div>13</div> <div>14</div>
  <div>15</div> <div>16</div>
</body>

W przypadku wszystkich innych elementów (klas, atrybutów lub dowolnej ich kombinacji), gdy szukasz n-tego dziecka pasującego do dowolnego selektora, nie będziesz w stanie tego zrobić za pomocą czystego selektora CSS. Zobacz moją odpowiedź na to pytanie .

Nawiasem mówiąc, nie ma dużej różnicy między 4n a 4n + 4 w odniesieniu do :nth-child() . Jeśli użyjesz nzmiennej, zacznie ona liczyć od 0. Oto, co pasowałby każdy selektor:

:nth-child(4n)

4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...

:nth-child(4n+4)

4(0) + 4 = 0  + 4 = 4
4(1) + 4 = 4  + 4 = 8
4(2) + 4 = 8  + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...

Jak widać, oba selektory będą pasować do tych samych elementów, co powyżej. W tym przypadku nie ma różnicy.

— BoltClock
źródło

Pomyślałem, że dodam, jeśli robisz coś takiego jak tylko czwarty, to potrzebujesz czegoś takiego tr td:nth-child(4). Zwróć uwagę na brak n w nawiasach

— kwadratowych

2

Uwaga: Działa to tylko na selektorach elementów (div, td, img itp.), a nie na selektorze klas, takich jak

— .this

1

Stworzyłem interaktywne demo, aby wizualnie wyjaśnić, jak działa nth-child (n): xengravity.com/demo/nth-child . Zauważyłem, że specyfikacja w3 jest szczególnie zniechęcająca dla początkujących, dla których dozwolona jest składnia; w szczególności ich sekcja „Skaner leksykalny”.

— xengravity

1

@xengravity: Dziękujemy za udostępnienie! Zgadzam się, gramatyka nie jest przyjazna dla początkujących, ponieważ została napisana z myślą o implementatorach, a nie autorach. Specyfikacja zawiera wiele przykładów pisania składni, ale bez towarzyszących jej elementów wizualnych.

— BoltClock

1

Zrobiłem podobne narzędzie do zabawy z wyrażeniami n-tego dziecka: salman-w.googlecode.com/svn/trunk/css/…

— Salman A

24

div:nth-child(4n+4)

Zobacz: http://css-tricks.com/how-nth-child-works/

— Tomalak
źródło

12

Spróbuj tego

div:nth-child(4n+4)

— Marko
źródło

10

Potrzebujesz poprawnego argumentu dla nth-childpseudoklasy.

Argument powinien być w formie an + b, aby dopasować każdego a ^th dziecko począwszy od b.
Zarówno ai bsą opcjonalne całkowitymi i oba mogą być zerowa lub ujemna.
- Jeśli awynosi zero, nie ma klauzuli „co ^th dziecko” .
- Jeśli ajest ujemne, dopasowanie jest wykonywane wstecz od b.
- Jeśli bjest zero lub ujemne, wówczas możliwe jest zapisanie równoważnego wyrażenia przy użyciu dodatniego bnp. 4n+0Jest takie samo jak 4n+4. Podobnie 4n-1jest jak 4n+3.

Przykłady:

Wybierz co czwarte dziecko (4, 8, 12, ...)

li:nth-child(4n) {
  background: yellow;
}

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Rozwiń fragment kodu

Wybierz co czwarte dziecko, zaczynając od 1 (1, 5, 9, ...)

Pokaż fragment kodu

li:nth-child(4n+1) {
  background: yellow;
}

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Rozwiń fragment kodu

Wybierz co trzecie i czwarte dziecko z grup 4-osobowych (3 i 4, 7 i 8, 11 i 12, ...)

Pokaż fragment kodu

/* two selectors are required */
li:nth-child(4n+3),
li:nth-child(4n+4) {
  background: yellow;
}

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Rozwiń fragment kodu

Wybierz pierwsze 4 pozycje (4, 3, 2, 1)

Pokaż fragment kodu

/* when a is negative then matching is done backwards  */
li:nth-child(-n+4) {
  background: yellow;
}

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

Rozwiń fragment kodu

— Salman A.
źródło