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

Halo segala balik lagi di artikel saya mengenai Pengenalan Pseudo Class :: Nth-Of-Type di CSS3 🙂

Masih belum bosan kan tetang pembahasan pseudo class The series 😀 ?   soalnya masih banyak yang mesti kalian ketahui mengenai pseudo class yang sering di gunakan oleh web designer dikala membangun layout blog. 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 pada menentukan targetnya. Apabila :nth-child akan mencari target berupa child, seandainya :nth-of-type akan mencari target berupa type element.

Misal target nth-child ialah

<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 ialah 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 bagi nth-of-type sama saja seperti nth-child dari segi penggunaannya cuma saja bagi nth-of-type beda di targernya yakini ialah elementya bukan child dari suatu element seperti nth-child.

Oke demikianlah pengertiannya serta penggunaannya bagi nth-of-type ,  semoga bermanfaat dan hingga bertemu di artikel berikutnya.

 

Sumber https://kursuswebsite.org