Hướng dẫn css selector first-child

Question

Home » Web Development

Nội dung chính Show

Hướng dẫn cách sử dụng first child trong CSS
Sử dụng :first-child
Last-child trong CSS
Nth-child trong CSS

First child trong CSS

Bài viết này mình sẽ Hướng dẫn cách sử dụng first child trong CSS. Đây là một thuộc tính CSS khá hay ho trong tùy chỉnh danh sách trên trang web.

Bài viết có thể bạn quan tâm: Hướng dẫn cách sử dụng last child trong CSS

MỤC LỤC NỘI DUNG

1 Hướng dẫn cách sử dụng first child trong CSS
- 1.1 Sử dụng :first-child

Hướng dẫn cách sử dụng first child trong CSS

First child trong CSS hay đầy đủ là :first-child Selector là vùng chọn được sử dụng cho danh sách (list) trong CSS. Ở hình trên bạn thấy rõ ràng danh sách có 5 mục, trong đó mục đầu chữ màu xanh nhờ việc ứng dụng :first-child, 4 mục còn lại chữ màu đen như mặc định.

Sử dụng :first-child

Cú pháp CSS của nó có dạng như này:

ul li:first-child {
background-color: #fcc;
font-weight: bold;
..
...
....
}

Một ví dụ ứng dụng cụ thể trên Hocban.vn cho bạn tham khảo: Khi mình muốn cái liên kết đầu tiên được nhấn mạnh bằng bôi màu vàng, lúc này CSS cho nó như này:

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

Kết quả ra như này:

Vi du ve dung first child cho danh sach tren Hocbanvn

Bây giờ mình sẽ qua một ví dụ khác có danh sách cụ thể hơn để bạn thực hành theo. Các bạn có thể thay đổi giá trị màu nền background thành giá trị mà bạn muốn, tương tự bạn có thể thêm các thuộc tính khác cho mục đầu tiên tùy ý.

See the Pen
First child trong CSS là gì và hướng dẫn cách sử dụng by Hocban.vn (@hocbanvn)
on CodePen.

Như vậy là qua bài này bạn đã biết được First child trong CSS là gì rồi đúng không nào, với những ví dụ và minh họa trên mình tin chắc bạn sẽ sử dụng được.

About The Author

Tịnh Nguyễn

Học Bạn.vn là blog chia sẻ kinh nghiệm, thủ thuật về WordPress và Web Development hướng đến người làm web không chuyên | Chủ yếu là giúp mọi người giải quyết các vấn đề nhỏ khi làm web với WordPress | Tịnh Nguyễn cảm ơn anh chị em đã ỦNG HỘ giúp Hocban.vn có thêm nguồn lực để phát triển.

Một kỹ thuật trong CSS cũng hay thường gặp đó là sử dụng bộ chọn CSS (CSS Selector). Khi viết các mã như first-child, last-child, nth-child nó sẽ tự động bắt phần tử được chọn. Để tránh nhầm lẫn trong khi viết mã hãy tìm hiểu khái niệm chi tiết ở bài này.

First-child trong CSS
Last-child trong CSS
Nth-child trong CSS

First child là phần tử đầu tiên. Hiểu một cách đơn giản nó là đứa con đầu tiên trong một gia đình.

Ví dụ:

<ul>
<li>Wordpress</li>
<li>PHP</li>
<li>CSS</li>
<li>HTML</li>
<li>JavaScript</li>
</ul>

Khi tạo Menu các phần tử li giống hệt nhau. Chúng ta không nên áp mỗi cái là một class cho nó. Vì làm như thế đoạn code sẽ trở nên cồng kềnh.

Giả sử bây giờ mình muốn làm cho thằng li đầu tiên có một background khác so với những thằng còn lại.

ul li {
display: inline;
margin-right: 10px;
background: blue;
color: #fff;
padding: 10px 20px;
}
ul li:first-child {
background: green;
}

Last-child trong CSS

Last child là phần tử cuối cùng được chọn. Nó giống như đứa con út trong một gia đình vậy.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 50px;
}
#box .item {
display: inline-block;
margin-right: 15px;
background: #444;
color: #fff;
padding: 8px 18px;
}
#box .item:last-child {
background: red;
}
</style>
</head>
<body>

<div id="box">
<div class="item">Wordpress</div>
<div class="item">PHP</div>
<div class="item">CSS</div>
<div class="item">HTML</div>
<div class="item">JavaScript</div>
</div>

</body>
</html>

Nth-child trong CSS

Nth child là phần tử được chọn tứ n. Khi viết sẽ là nth-child(n).

Cũng với ví dụ trên bây giờ mình muốn áp CSS cho thằng ở vị trí thứ 3.

#box .item:nth-child(3) {
background: red;
}

Kết luận: Để sử dụng first-child, last-child, nth-child không bị lỗi bạn sẽ cần có phần tử cha, bên trong đó là các phần tử con. Như ở ví dụ 1 thì phần tử cha sẽ là ul, ví dụ 2 phần tử cha là box.