A :nth-child(An+B [of S]?) polyfill berkat CSS :has() dan :not() – Bram.us

~

# Kode

Jika Anda di sini hanya untuk kode, ini dia. Anda dapat melihat kode beraksi di demo di bawah ini. Gunakan generator pemilih di bawah ini untuk membuat pemilih Anda sendiri.

/* :nth-child(1 of .special) */
.special:not(.special ~ .special) 
    …


/* :nth-child(2 of .special) */
.special ~ .special:not(.special ~ .special ~ .special) 
    …


/* :nth-child(3 of .special) */
.special ~ .special ~ .special:not(.special ~ .special ~ .special ~ .special) 
    …


…

/* :nth-last-child(1 of .special) */
.special:not(:has(~ .special)) 
    …


/* :nth-last-child(2 of .special) */
.special:not(:has(~ .special ~ .special)):not(.special:not(:has(~ .special))) 
    …


/* :nth-last-child(3 of .special) */
.special:not(:has(~ .special ~ .special ~ .special)):not(.special:not(:has(~ .special ~ .special))) 
    …

Jika Anda ingin tahu cara kerjanya, teruslah membaca 🙂

~

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

CSS Selectors level 3 memperkenalkan :nth-child() pemilih kelas semu

Itu :nth-child(an+b) notasi pseudo-class mewakili elemen yang memiliki an+b-1 saudara kandung sebelumnya di pohon dokumen, untuk setiap bilangan bulat positif atau nilai nol n. Untuk nilai dari a dan b lebih besar dari nol, ini secara efektif membagi anak-anak elemen menjadi beberapa kelompok a elemen (kelompok terakhir mengambil sisanya)dan memilih bth unsur tiap kelompok.

Pemilih ini sebagian besar digunakan untuk memilih elemen ganjil atau genap dari sekelompok saudara kandung, atau untuk mengganti gaya grup elemen.

tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd)  /* same */
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1)  color: navy; 
p:nth-child(4n+2)  color: green; 
p:nth-child(4n+3)  color: maroon; 
p:nth-child(4n+4)  color: purple; 

Di CSS Selectors level 4, pemilih ini diperluas dengan opsional of S bagian.

Itu :nth-child(An+B [of S]?) notasi pseudo-class mewakili elemen yang ada di antara An+Bth elemen dari daftar yang terdiri dari saudara inklusif mereka yang cocok dengan daftar pemilih S. Jika S dihilangkan, defaultnya adalah *|*.

Dengan melewati argumen pemilih, Anda dapat memilih Nelemen th yang cocok dengan pemilih itu. Misalnya, Anda dapat memilih “item ke-2 dengan kelas .bar” seperti itu:

:nth-child(2 of .bar) 
  color: red;

Pemilih pada dasarnya pertama-tama melakukan pra-pemilihan anak-anak yang cocok dengan daftar pemilih yang diberikan, dan hanya menerapkan An+B logika ke subset saudara kandung itu. Saya telah merinci pendekatan ini sebelumnya di CSS :nth-of-class pemilih.

~

# Pemilih

Sambil bermain-main dengan kode untuk memilih nth elemen dari “pulau elemen” dengan memanfaatkan CSS :has() saya perhatikan :has() juga dapat digunakan untuk polyfill :nth-child(An+B [of S]?) dan :nth-last-child(An+B [of S]?). Kami melakukan ini dengan menggunakan kombinator saudara umum ~ bukannya combinator saudara yang berdekatan +

~

:nth-child(B of S)

Pemilih di bawah ini akan melakukan polyfill :nth-child(2 of .special):

.special ~ .special:not(.special ~ .special ~ .special) 
    …

Ini bekerja dengan:

• Memilih semua .specials yang didahului oleh 1 .special menggunakan .special ~ .specialsecara efektif memilih yang ke-2, ke-3, ke-4, … .special saudara.
• Membatasi pilihan itu untuk mengecualikan apa pun .special yang didahului oleh 2 .specials, menghilangkan 3, 4, … .special saudara dari seleksi awal.

Dengan menambahkan lebih banyak ~ .special bagian ke pemilih, ke-3, ke-4, ke-5, … .special saudara bisa dipilih. Lihat generator pemilih di bawah untuk membuatnya.

~

:nth-last-child(B of S)

Pemilih di bawah ini akan melakukan polyfill :nth-last-child(3 of .special):

.special:not(:has(~ .special ~ .special ~ .special)):not(.special:not(:has(~ .special ~ .special))) 
    …

Ini bekerja dengan:

• Memilih 3 terakhir .specialmenggunakan .special:not(:has(~ .special ~ .special ~ .special))
• Memilih semua kecuali 2 yang terakhir .specialmenggunakan .special:not(.special:not(:has(~ .special ~ .special)))
• Mengambil persimpangan dari kedua pilihan.

Dengan menambahkan lebih banyak ~ .special bagian ke pemilih, saudara kandung lainnya dapat dipilih. Lihat generator pemilih di bawah untuk membuatnya.

~

# Demo

Lihat Pena Membuat Selector baru dengan :has(): A :nth-child(n of S) polyfill oleh Bramus (@bramus) di CodePen.

~

# Generator Selektor

Selektor yang dibuat dapat dihasilkan secara otomatis, karena ini adalah masalah penambahan ekstra ~ .special bagian ke pemilih untuk memindahkan jarum. Gunakan dropdown+input pada pena di bawah untuk menghasilkan pemilih yang Anda inginkan.

Lihat Pena
Membuat Selector baru dengan :has(): A :nth-child(n of S) polyfill oleh Bramus (@bramus)
di CodePen.

~

# Dukungan Peramban

Selektor ini didukung oleh semua browser yang ada :has() mendukung. Pada saat penulisan ini tidak termasuk Firefox.

~

# Sebarkan beritanya

Untuk membantu menyebarkan isi postingan ini, jangan ragu untuk me-retweet tweet pengumumannya:

~