CSS nth-child Selector
nth-child digunakan untuk menyeleksi element berdasarkan urutan anak (child). Dalam sebuah element, terdapat tag pembuka (opening tag) dan tag penutup (closing tag), contoh: opening tag: <div>
dan closing tag-nya adalah: </div>
yang ditandai dengan /
. Jadi, setiap element yang berada didalam element lain (didalam tag pembuka dan tag penutup), bisa dikatakan child atau anak element dari element yang menaunginya. Tapi, tidak semua element memiliki closing tag. nth-child ditulis dengan kode seperti: :nth-child(X)
: X = bisa ditulis dengan nomor, keyword ataupun formula.
Syntax
Penggunaan Sintaksis CSS nth-child
:nth-child(X) {
Property: Value; /* Deklarasi CSS */
}
/*
Ket:
nth-child(X) = X bisa di tulis dengan:
1. number : nomor (1,2,3,4,5 etc.)
2. keyword: odd, even
3. formula: (3n), (n+4), (-n+4), (2n+3), (-2n+9) etc.
*/
Example
Contoh CSS nth-child
div p:nht-child(2)
: Menyeleksi p
yang mana anak kedua dari div
.
<div>
<p>anak pertama</p>
<p>anak kedua</p>
<p>anak ketiga</p>
<p>anak keempat</p>
</div>
div p:nth-child(2) {
background-color: yellow
}
Contoh diatas, Kita analogikan seperti ini:
- Dalam kode HTML diatas, elemen
<div>
...</div>
adalah orang tua (parent) yang memiliki anak (children) sebanyak 4 ( yaitu elemen<p>
...</p>
sebanyak 4 baris) - Contoh:
kita ingin menyeleksi anak kedua saja, maka didalam css kita tulis:
div p:nth-child(2)
Yang artinya:
div
= orang tua
p
= anak daridiv
:nth-child(X)
= Dalam contoh pertama ini, kita gantiX
dengan angka 2 seperti ini:nth-child(2)
yang artinya urutan anak ke 2, Sehingga:Artinya,div p:nth-child(2) { background: yellow }
div
yang memiliki anakp
urutan ke 2 (anak kedua) memiliki style background yellow (background berwarna kuning).
Kode diatas dapat dilihat hasilnya pada contoh lengkap demo editor dibawah ini:
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo CSS nth-child - apacara.com</title>
<style>
div p:nth-child(2) {
background-color: yellow
}
</style>
</head>
<body>
<div>
<p>anak pertama</p>
<p>anak kedua</p>
<p>anak ketiga</p>
<p>anak keempat</p>
</div>
</body>
</html>
Untuk pembahasan selanjutnya, gunakan Code Editor diatas untuk uji coba dengan cara copy-paste kedalam editor tersebut, ataupun mengetiknya secara manual.
Contoh 2
:nth-child(3n)
nth-child
dengan formula (3n).
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
<li>list 4</li>
<li>list 5</li>
<li>list 6</li>
<li>list 7</li>
<li>list 8</li>
<li>list 9</li>
<li>list 10</li>
</ul>
li:nth-child(3n) {
background-color: red;
}
3n bisa diartikan setiap kelipatan 3 dan dimulai dari anak ke-3. Kode diatas, menyeleksi <li>
anak ke-3 dan kemudian setiap kelipatan 3 berikutnya. jadi memilih anak ke- 3, 6, dan 9. Kita bisa menentukan angka berapapun sesuai dengan kelipatan yang kita inginkan.
Contoh 3
:nth-child(odd)
dan :nth-child(even)
:nth-child
dengan odd dan even sebagai keyword.
Kita gunakan kode HTML pada Contoh Kedua diatas, dan kode CSS-nya adalah sebagai berikut:
li:nth-child(odd) {
background-color: red;
}
li:nth-child(even) {
background-color: yellow;
}
odd artinya ganjil, jadi menyeleksi "anak" dengan urutan ganjil, yaitu: 1, 3, 5, 7 dan 9. Sedangkan even adalah kebalikannya, yaitu genap, jadi menyeleksi "anak" ke 2, 4, 6, 8 dan 10.
Contoh 4
:nth-child(n+4)
Masih menggunakan kode HTML dari Contoh Kedua diatas, dan dengan CSS berikut:
li:nth-child(n+4) {
background-color: yellow;
}
Artinya, menyeleksi semua <li>
dari anak ke-4 dan seterusnya (menyeleksi anak ke 4, 5, 6, 7, 8, 9 dan 10).
Contoh 5
:nth-child(-n+4)
Dengan menggunakan kode HTML dari Contoh Kedua diatas, dan dengan CSS berikut:
li:nth-child(-n+4) {
background-color: yellow;
}
Artinya menyeleksi semua <li>
dari anak ke-4 dan kebawahnya (hingga angka terendah yang menunjukkan minus). Ini menyeleksi anak ke 4, 3, 2, dan 1.
Dari contoh nth-child(n+4)
dan nth-child(-n+4)
diatas, dapat diambil kesimpulan: Jika n adalah positif (bukan -n) maka penyeleksiannya dari "anak" pertama hingga "anak" terakhir, sedangkan jika negatif (-n) maka penyeleksiannya dari "anak" terakhir hingga "anak" pertama (sampai dengan angka yang ditentukan setelah +).
Contoh 6
:nth-child(2n+3)
li:nth-child(2n+3) {
background-color: yellow;
}
2n+3
= 3
, artinya penyeleksian dimulai dari anak ke-3.
2n
= artinya setiap kelipatan dua.
Jadi, pertama seleksi anak ketiga, kemudian teruskan penyeleksian dengan kelipatan dua dari anak ketiga tersebut. Hasilnya, yang terseleksi adalah anak ke-3, 5, 7 dan 9.
Contoh 7
:nth-child(-2n+9)
li:nth-child(-2n+9) {
background-color: red;
}
-2n+9
= 9
, artinya penyeleksian dimulai dari anak ke 9.
-2n
= artinya setiap kelipatan dua (minus kebawahnya (urutan angka dari tinggi hingga terendah)).
Jadi, pertama seleksi anak kesembilan, kemudian penyeleksian minus dengan kelipatan dua dari anak kesembilan tersebut hingga angka terendah. Hasilnya, yang terseleksi adalah anak ke 9, 7, 5, 3 dan 1.
SHARE