Categories CSS

Lớp giả first-child trong CSS

First-child dịch ra tiếng Việt là đứa con cả, và trong CSS, điều này có nghĩa là nó sẽ tác động đến thẻ đầu tiên của thẻ cha. 

Giả dụ tôi có 3 thẻ p như thế này:

<p>Họ và tên: Nguyễn Đức Anh</p>
<p>Chức vụ: Quản trị web, Thiết kế web</p>
<p>Kỹ năng: HTML, CSS, JavaScript, JQuery, PHP, PTS</p>

Giờ nếu tôi viết trong CSS như thế này:

p:first-child {color:blue}

Thì dòng chữ đầu tiên Họ và tên: Nguyễn Đức Anh sẽ có màu xanh.

Có một chú ý nhỏ, đó là câu lệnh:

p:first-child {color:blue} 

Sẽ tác động đến tất cả thẻ p mà là con cả, chẳng hạn nếu chúng ta có mã đánh dấu như sau:

<!DOCTYPE html>
<html>
<head>
<title>Blog Kiến càng</title>
<style>
p:first-child
{
p:first-child {color:blue}

}
</style>
</head>
<body>
 
<p>Họ và tên: Nguyễn Đức Anh</p>
<p>Chức vụ: Quản trị web, Thiết kế web</p>
<p>Kỹ năng: HTML, CSS, JavaScript, JQuery, PHP, PTS</p>
 
<div>
<p>Sở thích: Chơi thể thao, lướt web</p>
<p>Nhân vật ưa thích: Osho</p>
</div>
 
</body>
</html>

Theo bạn những đoạn văn bản nào sẽ có màu xanh? Câu trả lời là có 2 đoạn. Đoạn thứ nhất là Họ và tên: Nguyễn Đức Anh thì bạn đã hiểu. Đoạn thứ hai cũng có màu xanh, đó là Sở thích: Chơi thể thao, lướt web

Sở dĩ “Sở thích: Chơi thể thao, lướt web” có màu xanh là bởi vì nó cũng là con cả, cụ thể, nó là con cả của thẻ div.

Chốt hạ: lớp giả first-child tác động đến tất cả các con cả của các thẻ khác nhau.


Trình duyệt hỗ trợ

Tất cả các trình duyệt phổ thông đều hỗ trợ first-child, bao gồm: Chrome, FireFox, Opera, Safari, IE.


Một số ví dụ khác

CSS: 

p:first-child b
{
background:yellow;
}

Mã đánh dấu:

<p>Tôi là <b>Nguyễn Đức Anh</b>. Tôi quản trị trang web <b>Blog Kiến càng</b>.</p>
<p>Tôi sinh năm <b>1987<./b>. Quê ở <b>Hà Tây</b>.</p>

Kết quả: Làm cho tất cả các nội dung bôi đậm trong thẻ p đầu tiên có nền màu vàng.

Tôi là Nguyễn Đức Anh. Tôi quản trị trang web Blog Kiến càng.
Tôi sinh năm 1987. Quê ở Hà Tây.

Danh sách bộ chọn

Back to Top