Pseudoclass first-of-type

Pseudoclass first-of-type memilih elemen yang merupakan turunan pertama dari induk dengan tipe yang ditentukan. Artinya, jika ditulis h2:first-of-type - akan ditemukan h2 pertama dalam induk (berbeda dengan first-child, yang hanya akan menemukan h2 yang berada pada posisi paling pertama dalam induk).

Sintaks

cssselector:first-of-type {
  
}

Contoh

Mari temukan paragraf yang merupakan paragraf pertama dalam induk:

html<div>
  <h2>judul</h2>
  <p>paragraf</p>
  
  <h2>judul</h2>
  <p>paragraf</p>
  
  <h2>judul</h2>
  <p>paragraf</p>
</div>

cssp:first-of-type {
  color: red;
}

Результат: