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.
- YOutube
- 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.
- YOutube
- Tamtay
- Zing
Trình duyệt hỗ trợ
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.
