Memahami Pemilih CSS :nth-child()

Seperti semua pemilih CSS, Anda dapat menggunakan :nth-child() untuk mengidentifikasi elemen di halaman web dan menerapkan gaya pada elemen tersebut. Namun pemilih ini memungkinkan Anda mempersempit kumpulan saudara berdasarkan posisi relatifnya.

Pemilih mendukung beberapa kata kunci dasar untuk kasus umum, namun juga menyediakan sintaks pencocokan pola yang kuat. Dengan menggunakannya, Anda dapat memilih elemen berdasarkan pola reguler, berulang, atau definisi yang lebih kompleks, berdasarkan kebutuhan Anda.

Sintaks Pemilih :nth-child()

Sebagai Pemilih kelas semu CSS, sintaks :nth-child() berbeda dari penyeleksi lainnya. Dibutuhkan argumen sebagai pola untuk mencocokkan elemen dalam satu set saudara kandung:

:nth-child(args) {
/*...*/
}

Fokus utamanya adalah pada argumen di dalam tanda kurung. Argumen ini menentukan subset elemen yang akan dipilih.

Menggunakan Nilai Kata Kunci untuk Kasus Umum

Pemilih ini dapat menampung dua nilai kata kunci:

aneh Dan bahkan. Mereka sangat berguna untuk menata baris alternatif dalam sebuah tabel.

Daftar terurut sederhana adalah contoh bagus lainnya tentang kapan Anda dapat menggunakan nilai kata kunci berikut:

<ol>
<li>Item 1li>
<li>Item 2li>
<li>Item 3li>
<li>Item 4li>
<li>Item 5li>
<li>Item 6li>
<li>Item 7li>
ol>

Menggunakan :anak ke-n (ganjil) pemilih, Anda dapat mengubah warna setiap item alternatif:

:nth-child(odd) {
color: red;
}

Item dimulai pada indeks 1, sehingga item pertama akan tampak berwarna merah, lalu item ketiga, dan seterusnya:

Notasi Fungsional untuk Fleksibilitas Lebih Banyak

Anda dapat menggunakan bilangan bulat tunggal untuk memilih elemen individual, seperti ini:

li:nth-child(4) {
color: red;
}

Dalam hal ini, pemilih hanya cocok dengan item keempat dalam daftar:

Sintaks ini adalah kasus khusus dari sintaksis fungsional yang lebih umum yang memilih item yang cocok dengan pola tertentu. Sintaksnya adalah:

:nth-child(An+B) {
/*...*/
}

Dalam notasi ini, A adalah ukuran langkah. Ini berarti berapa kali pemilih bergerak untuk memilih item berikutnya. Ini memungkinkan Anda memilih setiap item lainnya, setiap item ketiga, dll. B merupakan titik awal dimana seleksi dimulai.

Misalnya, ambil argumen 3n+1:

li:nth-child(3n+1) {
color: red;
}

Ini akan memulai pemilihan pada item pertama dan dilanjutkan dengan setiap item ketiga setelahnya:

Bandingkan ini dengan ekspresi 3n+2:

li:nth-child(3n+2) {
color:red;
}

Ini masih memilih setiap item ketiga, tapi sekarang dimulai dari item kedua dalam daftar:

Contoh menarik lainnya adalah :nth-child (n+3):

li:nth-child(n+3) {
color: red;
}

Yang ini akan memilih setiap item (n), mulai dari yang ketiga (+3). Ini akan terlihat seperti ini:

Anda juga dapat menggunakan pengurangan untuk mencapai hasil tertentu:

li:nth-child(3n-1) {
color: red;
}

Contoh ini tetap memilih setiap item ketiga, tetapi dimulai dari “minus dulu”. Artinya, ini berarti ia akan memilih item kedua dalam daftar, lalu item kelima, dan seterusnya:

dari Sintaksis

Anda juga dapat menggunakan kata kunci dari diikuti oleh a pemilih sebagai argumen di pemilih :nth-child(). Sintaks ini memungkinkan Anda mempersempit kemungkinan item yang dipilih oleh pola reguler.

Misalnya, bayangkan markup Anda lebih rumit dari aslinya:

<ol>
<liclass="old">Item 1li>
<liclass="new">Item 2li>
<liclass="new">Item 3li>
<liclass="old">Item 4li>
<liclass="new">Item 5li>
<liclass="new">Item 6li>
<liclass="new">Item 7li>
ol>

Sekarang, gunakan :nth-child untuk memilih item genap dari kumpulan item dengan kelas tertentu:

.new {
font-weight: bold;
}
li:nth-child(evenof.new) {
color: red;
}

Perhatikan bagaimana hanya item tebal bernomor genap yang berwarna merah:

Pertimbangkan juga perbedaannya dengan li.baru: anak ke-n (genap) yang menargetkan elemen .new, tetapi hanya jika elemen tersebut genap. Ini akan menjadi item 2 dan 6 pada contoh di atas.

Bekerja Dengan Pemilih :nth-child()

Anda dapat mencapai desain unik menggunakan pemilih :nth-child(). Anda dapat membuat situs web berwarna dan menyorot baris dan kolom dalam tabel data. Menggabungkannya dengan pemilih CSS lainnya akan membantu Anda membuat tata letak dan desain yang rumit.