Sử dụng last child selector trong CSS

last child selector trong CSS

Last child selector trong CSS

Last child hay đầy đủ là :last-child Selector là vùng chọn được sử dụng cho danh sách (list) trong CSS. Nếu như First child nó chọn mục đầu tiên của danh sách thì Last child sẽ chọn mục cuối.

Sử dụng :last-child

Cú 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-child

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
Sử dụng last child selector trong CSS
by Hocban.vn (@hocbanvn)
on CodePen.


Như vậy là qua bài này bạn đã biết được Last 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
0 Comments
Inline Feedbacks
View all comments