CSS'deki her bir Nth öğeyi seçin

242

Diyelim ki, bir dizi öğedeki her dördüncü öğeyi seçmek mümkün müdür?

Örn: 16 <div>elementim var ... Gibi bir şey yazabilirim.

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

Bunu yapmanın daha iyi bir yolu var mı?

css css-selectors

— Derek Adair
kaynak

1

Umarım herkes hala canlıdır, sadece yeni başlayanlar için ve yeni başlayanlar için değil, hatta her n element ve daha zor şeyler için bir miktar seçin: nthmaster.com

— gengns

419

Adından da anlaşılacağı gibi, sabit sayılara ek olarak değişkeni kullanarak aritmetik bir ifade oluşturmanıza izin verir . Sen (ek gerçekleştirebilir ), çıkarma ( ) ve katsayı çarpma ( pozitif sayılar, negatif sayılar ve sıfır dahil olmak üzere bir tam sayıdır).:nth-child()n+-ana

Yukarıdaki seçici listesini nasıl yeniden yazacağınız aşağıda açıklanmıştır:

div:nth-child(4n)

Bu aritmetik ifadelerin nasıl çalıştığına dair bir açıklama için, bu soruya verilen cevaba ve spesifikasyona bakın .

Bu yanıtın, aynı üst öğedeki tüm alt öğelerin aynı öğe türünde olduğunu varsaydığını unutmayın div. Aşağıdakiler gibi farklı türde başka öğeler varsa h1ya p, kullanmak gerekecektir :nth-of-type()yerine :nth-child()sadece saymak sağlamak için divelemanlar:

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

Rasgele bir seçiciyle eşleşen n'inci çocuğu aradığınız diğer her şey (sınıflar, öznitelikler veya bunların herhangi bir kombinasyonu) için bunu saf bir CSS seçicisiyle yapamazsınız. Bu soruya cevabımı gör .

Bu arada, 4n ve 4n + 4 arasında çok fazla fark yok :nth-child(). nDeğişkeni kullanırsanız, 0'da saymaya başlar. Her seçicinin uyuşacağı şey budur:

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

Gördüğünüz gibi, her iki seçici de yukarıdakiyle aynı öğelerle eşleşecek. Bu durumda, fark yoktur.

— BoltClock
kaynak

Sadece ekleyeceğimi düşündüm, sadece dördüncü gibi bir şey yapıyorsanız böyle bir şeye ihtiyacınız olacak tr td:nth-child(4). Köşeli parantez içindeki n eksikliğine dikkat edin

— WORMSS

2

lütfen not: Bu .Bu gibi değil sınıf seçicisi, yalnızca öğe seçiciler (div td, img vs) üzerinde çalışır

— sliq

1

Nth -child (n) 'in nasıl çalıştığını görsel olarak açıklamak için etkileşimli bir demo oluşturdum: xengravity.com/demo/nth-child . W3 spec sözdizimi izin verilen yeni başlayanlar için özellikle göz korkutucu buldum; özellikle 'Lexical tarayıcı' bölümü.

— xengravity

1

@xengravity: Paylaştığınız için teşekkürler! Katılıyorum, dilbilgisi yazarlar değil uygulayıcılar düşünülerek yazıldığı için başlangıç dostu değil. Spesifikasyon, eşlik eden görseller olmadan sözdiziminin nasıl yazılacağına dair birkaç örnek sağlar.

— BoltClock

1

Nth

— Salman A

24

div:nth-child(4n+4)

Bkz. Http://css-tricks.com/how-nth-child-works/

— Tomalak
kaynak

12

Bunu dene

div:nth-child(4n+4)

— Marko
kaynak

10

nth-childSözde sınıf için doğru argümana ihtiyacınız var .

Argüman şeklinde olmalıdır an + bher bir maç için ^inci b başlayarak çocuk.
Hem ave bopsiyonel tam sayılardır ve her ikisi de sıfır veya negatif olabilir.
- Eğer asıfır o zaman hiçbir yoktur "Her bir ^inci çocuk" tümcesi.
- aNegatif ise , eşleme başlangıçtan itibaren geriye doğru yapılır b.
- Eğer bo zaman sıfır veya negatif olduğu olumlu kullanarak eşdeğer ifadeyi yazmak mümkündür börneğin 4n+0aynıdır 4n+4. Benzer şekilde 4n-1aynıdır 4n+3.

Örnekler:

Her 4. çocuğu seçin (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>

Snippet'i genişlet

1'den başlayan her 4 çocuğu seçin (1, 5, 9, ...)

Kod snippet'ini göster

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>

Snippet'i genişlet

Her 3 ve 4. çocuğu 4'lü gruplar arasından seçin (3 ve 4, 7 ve 8, 11 ve 12, ...)

Kod snippet'ini göster

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

Snippet'i genişlet

İlk 4 öğeyi seç (4, 3, 2, 1)

Kod snippet'ini göster

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

Snippet'i genişlet

— Salman A
kaynak