Sử dụng first child selector trong CSS

First child trong CSS

First child trong CSS

First child 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

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.

Bài viết liên quan

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, là người thường đăng bài và comment dạo trên Hocban.vn

guest
1 Comment
Inline Feedbacks
View all comments
NAD <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">50</span><span style="color: #e91e63;">) </span>
Friend

ok google vào đây :))