Selector :first-of-type

Selector :first-of-type cho phép ta chọn những element con đầu tiên nằm trong type element cha

Ví dụ :

ul:first-of-type {
   font-weight: bold;
}

=> lấy tất cả element con nằm trong ul đầu tiên.

Cấu trúc:

tag:first-of-type {
  property: value; 
}

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>CSS Selectors</title>
</head>
<body>
<div>
   <p> My paragraph here. </p>
   <ul>
      <li> Facebook</li>
      <li> YOutube</li>
      <li> Instagram</li>
   </ul>
   <ul>
      <li> Tamtay</li>
      <li> Zing</li>
   </ul>   
</div>
</body>
</html>

Hiển thị trình duyệt chưa có CSS

My paragraph here.

  • Facebook
  • YOutube
  • Instagram
  • Tamtay
  • Zing

Thêm thuộc tính CSS

// in đậm những li trong list ul đầu tiên
ul:first-of-type {
 font-weight: bold;
 }

// chuyển màu li thứ 2 trong list ul đầu tiên
ul:first-of-type > li:nth-child(2) {
         color: #ff0275;
       } 

Hiển thị trình duyệt có CSS

My paragraph here.

  • Facebook
  • YOutube
  • Instagram
  • Tamtay
  • Zing

Trình duyệt hỗ trợ

Selector :first-of-type 1

Selector :first-of-typeđược hỗ trợ trong đa số các trình duyệt.

Ghi chú: Không hỗ trợ cho trình duyệt IE6. Cần khai báo <!DOCTYPE> cho các trình duyệt IE8 trở xuống.

Bình luận