Hướng dẫn cách sử dụng last child trong CSS

last child trong CSS

Last child selector trong CSS

Bài viết này mình sẽ Hướng dẫn cách sử dụng thuộc tính 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

Hướng dẫn cách sử dụng last child trong CSS

Last child trong CSS 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.

3.9/5 - (8 votes)




Subscribe
Notify of
guest

6 Comments
Inline Feedbacks
View all comments
Ưu đãi Hosting, VPS lên đến 50% và tặng bộ theme, plugin bản quyền hơn 1.600$XEM CHI TIẾT
+