Lebih banyak kontrol atas pilihan :nth-child() dengan sintaksis S

Filter kumpulan elemen turunan sebelum menerapkan logika An+B di dalamnya.

Bramus

Pemilih class pseudo :nth-child() dan :nth-last-child()

Dengan pemilih class pseudo :nth-child(), Anda dapat memilih Elemen dalam DOM berdasarkan indeksnya. Dengan menggunakan An+B microsyntax Anda mendapatkan kontrol yang baik atas elemen yang ingin Anda pilih.

  • :nth-child(2): Pilih anak ke-2.
  • :nth-child(2n): Memilih semua turunan genap (ke-2, ke-4, ke-6, ke-8, dan seterusnya).
  • :nth-child(2n+1): Memilih semua turunan ganjil (ke-1, ke-3, ke-5, ke-7, dan seterusnya).
  • :nth-child(5n+1): Pilih (=(5×0)+1) ke-1, (=(5×1)+1) ke-11, (=(5×2)+1) ke-1, ... turunan.
  • :nth-child(5n+2): Pilih (=(5×0)+2) ke-2, (=(5×1)+2) ke-12, (=(5×2)+2) ke-1, ... turunan.

Namun, ada lebih banyak pilihan materi iklan yang dapat Anda lakukan, jika Anda menghilangkan parameter A. Contoh:

  • :nth-child(n+3): Pilih setiap anak dari urutan ketiga ke atas (ke-3, ke-4, ke-5, dan seterusnya).
  • :nth-child(-n+5): Pilih setiap anak hingga yang ke-5 (ke-1, ke-2, ke-3, ke-4, ke-5).

Gabungkan beberapa pilihan :nth-child() ini dan Anda dapat memilih rentang elemen:

  • :nth-child(n+3):nth-child(-n+5): Pilih setiap anak mulai dari yang ketiga hingga yang ke-5 (ke-3, ke-4, ke-5).

Dengan menggunakan :nth-last-child(), Anda dapat melakukan pilihan serupa, tetapi alih-alih mulai menghitung dari awal, Anda mulai menghitung dari akhir.

Melakukan pra-pemfilteran pilihan dengan sintaksis of S

Fitur baru di Pemilih CSS Level 4 adalah kemampuan untuk meneruskan daftar pemilih ke :nth-child() dan :nth-last-child() secara opsional.

:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)

Saat of S ditentukan, logika An+B hanya diterapkan ke elemen yang cocok dengan daftar pemilih yang diberikan S. Hal ini pada dasarnya berarti Anda dapat memfilter turunan terlebih dahulu sebelum An+B melakukan tugasnya.

Dukungan Browser

  • 111
  • 111
  • 113
  • 9

Contoh

Misalnya, :nth-child(2 of .highlight) memilih elemen pencocokan kedua yang memiliki class .highlight. Dengan kata lain: dari semua turunan dengan class .highlight, pilih yang kedua.

Hal ini berbeda dengan .highlight:nth-child(2) yang memilih elemen yang memiliki class .highlight dan juga merupakan turunan kedua.

Dalam demo di bawah, Anda dapat melihat perbedaan ini:

  • Elemen yang cocok dengan :nth-child(2 of .highlight) memiliki garis batas merah muda.
  • Elemen yang cocok dengan .highlight:nth-child(2) memiliki garis batas berwarna hijau.

Perhatikan bahwa S adalah daftar pemilih yang berarti menerima beberapa pemilih yang dipisahkan oleh koma. Misalnya, :nth-child(4 of .highlight, .sale) akan memilih elemen keempat, yaitu .highlight atau .sale dari kumpulan elemen yang setara.

Dalam demo di bawah, elemen yang cocok dengan :nth-child(4 of .highlight, .sale) memiliki garis batas oranye yang diterapkan.

Penghilang zebra, dibuka kembali

Contoh klasik tempat :nth-child() digunakan, adalah saat membuat tabel bergaris zebra. Model ini merupakan teknik visual di mana setiap baris tabel berganti warna. Biasanya, pendekatannya dilakukan sebagai berikut:

tr:nth-child(even) {
  background-color: lightgrey;
}

Meskipun ini berfungsi dengan baik untuk tabel statis, akan bermasalah ketika Anda mulai memfilter isi tabel secara dinamis. Misalnya, jika baris dua disembunyikan, Anda akan melihat baris satu dan tiga terlihat, masing-masing dengan warna latar belakang yang sama.

Untuk memperbaikinya, kita dapat memanfaatkan :nth-child(An+B [of S]?) dengan mengecualikan baris tersembunyi dari logika An+B:

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

Cukup keren, kan?

Foto oleh Markus Spiske di Unsplash