Hướng dẫn class last-child css

  • Trang chủ
  • Hướng dẫn học
  • Hướng dẫn học CSS3
  • :last-child

: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ì :last-child sẽ được dùng để chọn thành phần cuối cùng trong danh sách.

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

Bây giờ ta sẽ sử dụng :last-child để thêm background-color cho "Item cuối cùng".

CSS viết:

ul li:last-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

Ví dụ thêm

Giả sử ta có một danh sách item được float theo chiều ngang như sau:

HTML viết:





  • Item đầu tiên
  • Item thứ 2
  • Item thứ 3
  • Item thứ 4
  • Item cuối cù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;
}

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

Ta thấy, chiều rộng của

    là 540px;, nhưng tổng chiều rộng của
  • là (100px + 10px) x 5 = 550px, do đó tổng chiều rộng lớn hơn chiều rộng của
      , nên một Item cuối cùng sẽ rơi xuống dòng thứ hai.

      Để giải quyết trường hợp này ta sử lý bằng :last-child mà không cần thêm class để phục hồi cho "Item cuối cùng", viết lại CSS như sau:

      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 margin-right: 0; cho "Item cuối cùng", ta được kết quả sau:

      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

      Đó 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 :last-child

      Home » Web Development

      Hướng dẫn class last-child css

      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

      • 1 Hướng dẫn cách sử dụng last child trong CSS
        • 1.1 Sử dụng :last-child
        • 1.2 Ví dụ dùng :last-child

      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.

      About The Author

      Tịnh Nguyễn

      Học Bạn.vn là blog chia sẻ kinh nghiệm, thủ thuật về WordPress  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.