พีซูโดคลาส first-of-type

พีซูโดคลาส first-of-type เลือก องค์ประกอบที่ซึ่งเป็นลูกตัวแรก ของประเภทที่กำหนดในผู้ปกครอง นั่นคือ ถ้าเขียน h2:first-of-type - จะเจอ h2 ตัวแรกในผู้ปกครอง (ต่างจาก first-child, ซึ่งจะเจอเฉพาะ h2 ที่อยู่ เป็นลำดับแรกสุดในผู้ปกครอง)

ไวยากรณ์

cssselector:first-of-type {
  
}

ตัวอย่าง

มาหาย่อหน้าที่ซึ่งเป็นย่อหน้าแรก ในผู้ปกครอง:

html<div>
  <h2>หัวข้อ</h2>
  <p>ย่อหน้า</p>
  
  <h2>หัวข้อ</h2>
  <p>ย่อหน้า</p>
  
  <h2>หัวข้อ</h2>
  <p>ย่อหน้า</p>
</div>

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

Результат: