Hướng dẫn class last-child 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:
Ví dụ thêmGiả sử ta có một danh sách item được float theo chiều ngang như sau: 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:
Ta thấy, chiều rộng của Để giải quyết trường
hợp này ta sử lý bằng 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;
} Ta đã thêm đoạn CSS reset lại Hiển thị trình duyệt:
Đó là một trong những cách xử lý hiệu quả nhất bằng cách sử dụng thuộc tính
Home » Web Development
Last child selector trong CSS Bài viết này mình sẽ Hướng dẫn cách sử dụng last 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 first child trong CSS MỤC LỤC NỘI DUNG
Hướng dẫn cách sử dụng last child trong CSSLast child trong CSS hay đầy đủ là Sử dụng :last-childCú pháp CSS của nó có dạng như này: ul li:last-child { background-color: #fcc; font-weight: bold; .. ... .... } Tùy trường hợp mà danh sách mà bạn đang muốn chỉnh lại nó sẽ vùng chọn khác nhau, ví dụ trường hợp vùng chọn cho danh sách trên Hocban.vn là: .widget ul li:last-child { Giờ muốn định dạng cho mục cuối trong danh sách thì viết thành: .widget ul li:last-child { background-color: #FFEB3B; padding-left: 1em; } Ví dụ dùng :last-childBâ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
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. |