Pilih setiap elemen ke-N di CSS

242

Apakah mungkin untuk memilih, katakanlah, setiap elemen keempat dalam serangkaian elemen?

Ex: Saya punya 16 <div>elemen ... Saya bisa menulis sesuatu seperti.

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

apakah ada cara yang lebih baik untuk melakukan ini?

css css-selectors

— Derek Adair
sumber

1

Semoga semua orang masih hidup, hanya untuk pemula dan tidak begitu pemula, bahkan memilih jumlah setiap elemen dan hal-hal yang lebih rumit: nthmaster.com

— gengns

419

Seperti namanya, memungkinkan Anda untuk membangun ekspresi aritmatika menggunakan variabel di samping angka konstan. Anda dapat melakukan penjumlahan ( ), pengurangan ( ) dan koefisien (di mana bilangan bulat, termasuk bilangan positif, bilangan negatif, dan nol).:nth-child()n+-ana

Inilah cara Anda akan menulis ulang daftar pemilih di atas:

div:nth-child(4n)

Untuk penjelasan tentang bagaimana ekspresi aritmatika ini bekerja, lihat jawaban saya untuk pertanyaan ini , serta spesifikasi .

Perhatikan bahwa jawaban ini mengasumsikan bahwa semua elemen anak dalam elemen induk yang sama adalah dari jenis elemen yang sama div,. Jika Anda memiliki elemen lain dari jenis yang berbeda seperti h1atau p, Anda harus menggunakan :nth-of-type()alih-alih :nth-child()memastikan Anda hanya menghitung divelemen:

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

Untuk yang lainnya (kelas, atribut, atau kombinasi dari semua ini), di mana Anda mencari anak ke-n yang cocok dengan pemilih sewenang-wenang, Anda tidak akan dapat melakukan ini dengan pemilih CSS murni. Lihat jawaban saya untuk pertanyaan ini .

Omong-omong, tidak ada banyak perbedaan antara 4n dan 4n + 4 sehubungan dengan :nth-child(). Jika Anda menggunakan nvariabel, itu mulai menghitung pada 0. Inilah yang akan cocok dengan setiap pemilih:

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

Seperti yang Anda lihat, kedua penyeleksi akan cocok dengan elemen yang sama seperti di atas. Dalam hal ini, tidak ada perbedaan.

— BoltClock
sumber

Saya hanya berpikir saya akan menambahkan, jika Anda melakukan sesuatu seperti hanya yang keempat maka Anda akan membutuhkan sesuatu seperti tr td:nth-child(4). Perhatikan kurangnya n dalam kurung

— WORMSS

2

harap dicatat: Ini hanya berfungsi pada pemilih elemen (div, td, img dll), bukan pada pemilih kelas seperti .ini

— Sliq

1

Saya membuat demo interaktif untuk menjelaskan secara visual bagaimana nth-child (n) bekerja: xengravity.com/demo/nth-child . Saya menemukan spesifikasi w3 sangat menakutkan bagi pemula di mana sintaks diperbolehkan; khususnya bagian 'pemindai leksikal' mereka.

— xengravity

1

@ xengravity: Terima kasih telah berbagi! Saya setuju, tata bahasanya tidak ramah-pemula karena ditulis dengan pelaksana dalam pikiran dan bukan penulis. Spesifikasi tersebut memang memberikan sejumlah contoh cara menulis sintaks, tetapi tanpa disertai visual.

— BoltClock

1

Saya telah membuat alat serupa untuk bermain dengan ekspresi anak ke-n: salman-w.googlecode.com/svn/trunk/css/…

— Salman A

24

div:nth-child(4n+4)

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

— Tomalak
sumber

12

Coba ini

div:nth-child(4n+4)

— Marko
sumber

10

Anda membutuhkan argumen yang benar untuk nth-childkelas pseudo.

Argumen harus dalam bentuk an + buntuk mencocokkan setiap satu ^th anak mulai dari b.
Keduanya adan bbilangan bulat opsional dan keduanya bisa nol atau negatif.
- Jika aadalah nol maka tidak ada "setiap satu ^th anak" klausa.
- Jika anegatif maka pencocokan dilakukan mundur mulai dari b.
- Jika bnol atau negatif maka dimungkinkan untuk menulis persamaan ekivalen dengan menggunakan bmisalnya positif 4n+0sama dengan 4n+4. Sama halnya 4n-1dengan 4n+3.

Contoh:

Pilih setiap anak ke-4 (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>

Luaskan cuplikan

Pilih setiap anak ke-4 mulai dari 1 (1, 5, 9, ...)

Tampilkan cuplikan kode

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>

Luaskan cuplikan

Pilih setiap anak ke-3 dan ke-4 dari grup 4 (3 dan 4, 7 dan 8, 11 dan 12, ...)

Tampilkan cuplikan kode

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

Luaskan cuplikan

Pilih 4 item pertama (4, 3, 2, 1)

Tampilkan cuplikan kode

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

Luaskan cuplikan

— Salman A
sumber