Mengenal dan Memahami Pseudo Class Selector :nth-of-type() Untuk Urutan Element Pada CSS

Dalam mempelajari CSS anda harus mengenal pseudo class :nth-of-type() selector untuk urutan element. Dengan memahami :nth-of-type() ini anda bisa menandai setiap urutan sebuah element di html. Tanpa harus membuat class dan id baru pada sebuah element yang akan kita eksekusi sebagai penanda yang akan diubah dengan CSS.


Apa Itu Pseudo Clas Selector :nth-of-type() ?

Mengenal dan Memahami Pseudo Class Selector :nth-of-type() Untuk Urutan Element Pada CSS

:nth-of-type() adalah salah satu jenis pseudo class selector berfungsi untuk menyeleksi untuk element dengan type yang sama. type yang dimaksud tidak lain ialah tag HTML itu sendiri seperti (div,span,p,ul,a dan lainnya).

Cara Menggunakan :nth-of-type() Pada CSS

Seperti namanya :nth yakni akan menyeleksi element berdasarkan urutan 1st, 2th, 3th, 4th dst.. bisa di tandai dengan menggunakan angka didalam kurung ().

Contoh pada tag html <div> berikut :
 <div>Elemen ke-1</div>
 <div>Elemen ke-2</div>
 <div>Elemen ke-3</div>
 <div>Elemen ke-4</div>
 <div>Elemen ke-5</div>

Kemudian silahkan coba satu per-satu beberapa macam penggunaan numeric, keyword, dan formula pada pseudo-class :nth-of-type berikut di CSS-nya :

1. Numeric :nth-of-type(2)

div:nth-of-type(odd){background:blue;}
Maka hasilnya seperti ini:
Gambar contoh penggunaan :nth-of-type()

Keterangan :
Memberikan warna background (background-color:blue;) pada salah satu tag yaitu diurutan ke-2 menggunakan pseudo class numeric :nth-of-type(2) di CSS-nya.

2. Keyword :nth-of-type (odd)

div:nth-of-type(even){background:blue;}
Hasilnya :
Gambar Menggunakan :nth-of-type() Selector Untuk Urutan Element Pada CSS

Keterangan :
Nah berbeda dengan penggunaan numeric sebelumnya jika menggunakan keyword (odd) maka akan menyeleksi elemen dengan kelipatan 2 (dua) diawali dari urutan ke-1 (satu).

3. Keyword :nth-of-type(even)

div:nth-of-type(even){background:blue;}
Hasilnya :
Gambar contoh penggunaan value :nth-of-type()

Keterangan :
Sama halnya, keyword (even) ini menyeleksi elemen dengan kelipatan 2 (dua) namun perbedaanya ialah diawali dari urutan ke-2 (dua).

4. Formula :nth-of-type(3n-0)

div:nth-of-type(even){background:blue;}
Hasilnya :
Gambar contoh :nth-of-type() pada css

Keterangan :
Jika formula ini menyeleksi elemen dengan kelipatan yang bisa ditentukan dan juga diawali dengan urutan angka yang sama.

Sedikit penjelasan detail pada contoh diatas, formula yang diberikan ialah (3n-0) maka menyeleksi kelipatan 3 (tiga) dan diawali dari urutan ke-3 (tiga).

Selebihnya silahkan bereksperimen dalam penggunaan formula pseudo class selector :nth-of-type() ini. Misal, silahkan coba formula (n+2) atau (-n+2) dan sebagainya maka hasilnya tentu akan berbeda.

Selamat mencoba!

No comments for "Mengenal dan Memahami Pseudo Class Selector :nth-of-type() Untuk Urutan Element Pada CSS"