Pseudoclass nth-of-type
Pseudoclass nth-of-type memilih elemen,
yang merupakan elemen ke-n dari tipe yang ditentukan.
Artinya, jika saya menulis h2:nth-of-type(4)
- akan ditemukan 4-h2 dalam induk (berbeda dengan
nth-child,
yang hanya akan menemukan h2 yang merupakan
elemen ke-4 dalam induk).
Sintaksis
selector:nth-of-type(angka | odd | even | ekspresi){
}
Nilai
| Nilai | Keterangan |
|---|---|
| angka |
Angka positif mulai dari 1. Menentukan nomor elemen
yang ingin kita tuju.
Penomoran elemen dimulai dari 1.
|
odd |
Elemen ganjil. |
even |
Elemen genap. |
| ekspresi |
Dapat membuat ekspresi khusus dengan huruf n,
yang menunjukkan semua bilangan bulat dari nol (bukan dari satu)
sampai tak terhingga. Jadi, 2n berarti semua bilangan genap
(mulai dari kedua).
Bagaimana memahaminya? Gantikan n secara berurutan
dengan angka dari 0 dan seterusnya: jika n = 0, maka 2n menghasilkan 0 -
elemen seperti itu tidak ada (penomoran elemen dimulai dari 1),
jika n = 1, maka 2n menghasilkan 2 - elemen kedua, jika n = 2,
2n menghasilkan 4 - elemen keempat. Jika menulis 3n - ini
akan menjadi setiap elemen ketiga (mulai dari ketiga), dan seterusnya.
|
Contoh
Temukan h2 yang merupakan h2 ke-2
dalam induk:
<div>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
</div>
h2:nth-of-type(2) {
color: red;
}
:
Contoh
Temukan semua h2 genap:
<div>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
</div>
h2:nth-of-type(even) {
color: red;
}
:
Contoh
Temukan semua h2 ganjil:
<div>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
<h2>judul</h2>
<p>paragraf</p>
</div>
h2:nth-of-type(odd) {
color: red;
}
:
