Pengenalan Pseudo Class :: Nth-Of-Type pada CSS3

Halo semua balik lagi di artikel saya tentang Pengenalan Pseudo Class :: Nth-Of-Type pada CSS3 🙂

Masih belum bosan kan tetang pembahasan pseudo class The series 😀 ? soalnya masih banyak yang harus kalian ketahui mengenai pseudo class yang sering di pakai oleh web designer saat membuat layout website. Oke apa yang akan kita bahas kali ini ? saya akan memberikan satu lagi sebuah pseudo class yaitu Nth-Of-Type .

Pseudo Element ini hampir sama dengan :nth-child hanya saja terdapat perbedaan dalam menentukan targetnya. Jika :nth-child akan mencari target berupa child, jika :nth-of-type akan mencari target berupa type element.

Misal target nth-child adalah

<ul>
  <li><li> // Ini target dari nth-child
  <li><li>  // Ini target dari nth-child
  <li><li>  // Ini target dari nth-child
</ul>

Sementara target dari nth-of-type adalah ke elementnya :

<ul> //ini target nth-of-type
  <li><li> 
  <li><li>  
  <li><li>  
</ul>

<ul> //ini target nth-of-type
  <li><li> 
  <li><li>  
  <li><li>  
</ul>

<ul> //ini target nth-of-type
  <li><li> 
  <li><li>  
  <li><li>  
</ul>

Jadi untuk nth-of-type sama saja seperti nth-child dari segi penggunaannya cuma saja untuk nth-of-type beda pada targernya yakini adalah elementya bukan child dari suatu element seperti nth-child.

Oke itulah pengertiannya serta penggunaannya untuk nth-of-type , semoga bermanfaat dan sampai bertemu pada artikel selanjutnya.

Pengenalan Pseudo Class :: Nth-Of-Type pada CSS3

Kategori