Hướng dẫn first-child last-child css - con đầu lòng con cuối css
Show :last-child là gì?Nếu như :first-child được dùng để chọn thành phần đầu tiên trong danh sách, thì Ví dụ như danh sách bên dưới đây: HTML viết:
Hiển thị trình duyệt:
Bây giờ ta sẽ sử dụng CSS viết: ul li:last-child {
background-color: #fcc;
}Hiển thị trình duyệt:
Bây giờ ta sẽ sử dụng :last-child để thêm background-color cho "Item cuối cùng".CSS viết: HTML viết:
CSS viết: ul {
border: 1px solid #ccc;
width: 540px;
}
ul li {
background-color: #f1f1f1;
float: left;
text-align: center;
margin-right: 10px;
width: 100px;
}Hiển thị trình duyệt:
Bây giờ ta sẽ sử dụng CSS viết: CSS viết: ul {
border: 1px solid #ccc;
width: 540px;
}
ul li {
background-color: #f1f1f1;
float: left;
text-align: center;
margin-right: 10px;
width: 100px;
}
ul li:last-child {
margin-right: 0;
}Ví dụ thêm Hiển thị trình duyệt:
Bây giờ ta sẽ sử dụng Home » Web Development » 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.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 CSSHướng dẫn cách sử dụng last child trong CSS MỤC LỤC NỘI DUNG
Hướng dẫn cách sử dụng first child trong CSSFirst child trong CSS hay đầy đủ là ul li:last-child {
background-color: #fcc;
}5 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 ul li:last-child {
background-color: #fcc;
}6, 4 mục còn lại chữ màu đen như mặc định.ul li:last-child {
background-color: #fcc;
}5 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 ul li:last-child {
background-color: #fcc;
}6, 4 mục còn lại chữ màu đen như mặc định.Sử dụng ul li:last-child { background-color: #fcc; }6ul li:last-child { background-color: #fcc; }6Cú 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 ul li:last-child {
background-color: #fcc;
}8 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 AuthorTị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. 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. |
