Cách sử dụng lớp giả CSS :first-child
Trần Thị Vân - 1732
- 14/07/2025
Chức năng của lớp giả CSS :first-child
Lớp giả CSS :first-child dùng để định dạng class đầu tiên trong các class giống nhau của phần tử cha hoặc định dạng phần tử con đầu tiên trong các phần tử con giống nhau trong phần tử cha
Cách sử dụng lớp giả CSS :first-child
ul li:first-child{
background:blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Cách sử dụng lớp giả CSS :first-child</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
ul{width:100%;float:left;heigt:auto;margin:0px;padding:0px}
ul li{margin:0px;padding:0px;list-style:none;padding:7px 5px; width:100%; background:red; float:left;height:auto;background:red;color:#000;border-top:1px solid green; color:#fff}
ul li:first-child{background:blue;}
</style>
</head>
<body>
<h1>Chạy thử Cách sử dụng lớp giả CSS :first-child</h1>
<p>Dùng để định dạng class đầu tiên trong các class giống nhau của phần tử cha hoặc định dạng phần tử con đầu tiên trong các phần tử con giống nhau trong phần tử cha.</p>
<ul>
<li>CSS :first-child</li>
<li>CSS :first-child</li>
<li>CSS :first-child</li>
<li>CSS :first-child</li>
<li>CSS :first-child</li>
<li>CSS :first-child</li>
</ul>
</body>
</html>
Những lỗi thường gặp khi sử dụng CSS :first-child
:first-child hoạt động dựa trên vị trí của phần tử trong phần tử cha, vì vậy chỉ cần hiểu sai cấu trúc HTML là kết quả hiển thị có thể khác hoàn toàn mong muốn. Dưới đây là những lỗi phổ biến cần kiểm tra khi sử dụng.
Chọn nhầm phần tử với :first-child
Lỗi thường gặp là nghĩ rằng :first-child sẽ chọn phần tử đầu tiên thuộc một loại thẻ nào đó. Thực tế, pseudo-class này chỉ áp dụng khi phần tử đang xét thực sự là phần tử con đầu tiên của phần tử cha.
Ví dụ, nếu một phần tử khác đứng trước thẻ p, quy tắc dưới đây sẽ không áp dụng cho thẻ p đầu tiên:
<div>
<h3>Tiêu đề</h3>
<p>Đoạn văn đầu tiên</p>
<p>Đoạn văn thứ hai</p>
</div>
Với cấu trúc này, p:first-child không chọn được đoạn văn nào vì thẻ p không phải phần tử con đầu tiên của div. Muốn chọn thẻ p đầu tiên bất kể phía trước có phần tử khác hay không, trường hợp này nên cân nhắc :first-of-type.
Nhầm :first-child với :first-of-type
Hai pseudo-class này dễ bị nhầm vì đều có thể được dùng để xử lý phần tử đầu tiên. Điểm khác biệt nằm ở phạm vi xét vị trí.
- :first-child kiểm tra phần tử có phải con đầu tiên của phần tử cha hay không.
- :first-of-type tìm phần tử đầu tiên cùng loại thẻ trong các phần tử con cùng cấp.
Chẳng hạn, với cấu trúc có thẻ h3 đứng trước thẻ p, p:first-child sẽ không khớp, trong khi p:first-of-type vẫn có thể chọn thẻ p đầu tiên.
Vì vậy, khi mục tiêu là xử lý phần tử đầu tiên theo loại thẻ, không nên thay thế tùy ý bằng :first-child. Xác định đúng điều kiện cần chọn sẽ giúp CSS ngắn gọn và tránh phải sửa lại HTML.
Dùng :first-child khi phần tử không nằm ở vị trí đầu tiên
Một lỗi khác xảy ra khi HTML được thay đổi sau khi CSS đã hoàn thiện. Chỉ cần thêm một phần tử mới vào trước phần tử đang được định dạng, điều kiện :first-child có thể không còn đúng.
Ví dụ, ban đầu cấu trúc có thể chỉ gồm các đoạn văn:
<div>
<p>Đoạn văn đầu tiên</p>
<p>Đoạn văn thứ hai</p>
</div>
Khi đó, p:first-child có thể áp dụng cho đoạn văn đầu tiên. Nhưng nếu thêm một tiêu đề phía trước:
<div>
<h3>Thông tin</h3>
<p>Đoạn văn đầu tiên</p>
<p>Đoạn văn thứ hai</p>
</div>
thì thẻ p không còn là phần tử con đầu tiên nữa. CSS cũ vì thế có thể không còn tạo ra giao diện như dự kiến.
Do đó, trước khi sử dụng :first-child, nên kiểm tra cả cấu trúc HTML lẫn mục tiêu cần chọn. Nếu yêu cầu phụ thuộc vào vị trí tuyệt đối của phần tử thì :first-child phù hợp; nếu chỉ cần tìm phần tử đầu tiên của một loại thẻ, :first-of-type thường là lựa chọn chính xác hơn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Cách sử dụng lớp giả CSS :first-child.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
