Home » Web Development
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ễnHọ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.
- Trang chủ
- Hướng dẫn học
- Hướng dẫn học CSS3
- :first-child
:first-child là gì?
:first-child
thật ra là bộ chọn có từ CSS, nhưng bộ chọn này rất tiện lợi khi bạn muốn reset giá trị
của thành phần đầu tiên, đặc biệt là trong danh sách có chứa dữ liệu tự động [như danh sách sử lý bằng PHP & MySQL].
Ví dụ như danh sách bên dưới đây:
HTML viết:
- Item đầu tiên
- Item thứ 2
- Item thứ 3
- Item thứ 4
- Item cuối cùng
Hiển thị trình duyệt:
- Item đầu tiên
- Item thứ 2
- Item thứ 3
- Item thứ 4
- Item cuối cùng
Nếu muốn điều khiển thành phần "Item đầu tiên", ví dụ thêm background-color, ta có thể sử dụng thêm
class, tuy nhiên với :first-child
ta có thể dễ dàng điều khiển thành phần đầu tiên này, viết CSS như sau:
CSS viết:
ul li:first-child {
background-color: #fcc;
}
Hiển thị trình duyệt:
- Item đầu tiên
- Item thứ 2
- Item thứ 3
- Item thứ 4
- Item cuối cùng
- Trang chủ
- Tham khảo
- CSS
- :first-child
Định nghĩa và sử dụng
":first-child" chọn thành phần đầu tiên của thành phần cha chứa nó.
Cấu trúc
tag:first-child { property: value; }
Ví dụ
HTML viết:
Đây là tag con đầu tiên của tag div.
Đây là tag con thứ hai của tag div.
Hiển thị trình duyệt khi chưa có CSS:
Đây là tag con đầu tiên của tag div.
Đây là tag con thứ hai của tag div.
CSS viết:
div p:first-child { color: #ff0000; }
Hiển thị trình duyệt khi đã có CSS:
Đây là tag con đầu tiên của tag div.
Đây là tag con thứ hai của tag div.
Trình duyệt hỗ trợ
":first-child" đượ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 cho các trình duyệt IE.