Hướng dẫn css last-child

• 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

  • Trang chủ
  • Tham khảo
  • CSS
  • CSS3
  • :last-child

  Định nghĩa và sử dụng

  • ":last-child" chọn thành phần cuối cùng của thành phần cha.
  • Chỉ chọn thành phần có thành phần cha, những thành phần độc lập sẽ không được chọn.

  Cấu trúc

  :last-child {
      property: value; 
  }

  Ví dụ

  HTML viết:

  
  
  
  
      
  Thành phần thứ nhất
      
  Thành phần thứ 2
      
  Thành phần thứ 3
      
  Thành phần thứ 4
      
  Thành phần thứ 5
      
  Thành phần thứ 6
  
  
  
      
  Thành phần thứ nhất
      
  Thành phần thứ 2
      
  Thành phần thứ 3
      
  Thành phần thứ 4
      
  Thành phần thứ 5
      
  Thành phần thứ 6
  
  
  
      
  Thành phần thứ nhất
      
  
          
  ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
          
  ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
      
      
  Thành phần thứ 3
      
  Thành phần thứ 4
      
  Thành phần thứ 5
      
  Thành phần thứ 6
  
  
  Thành phần độc lập thứ nhất
  Thành phần độc lập thứ 2
  Thành phần độc lập thứ 3
  Thành phần độc lập thứ 4
  Thành phần độc lập thứ 5
  Thành phần độc lập thứ 6
  
  

  Hiển thị trình duyệt khi chưa có CSS:

  Thành phần thứ nhất

  Thành phần thứ 2

  Thành phần thứ 3

  Thành phần thứ 4

  Thành phần thứ 5

  Thành phần thứ 6

  Thành phần thứ nhất

  Thành phần thứ 2

  Thành phần thứ 3

  Thành phần thứ 4

  Thành phần thứ 5

  Thành phần thứ 6

  Thành phần thứ nhất

  • ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
  • ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2

  Thành phần thứ 3

  Thành phần thứ 4

  Thành phần thứ 5

  Thành phần thứ 6

  Thành phần độc lập thứ nhất

  Thành phần độc lập thứ 2

  Thành phần độc lập thứ 3

  Thành phần độc lập thứ 4

  Thành phần độc lập thứ 5

  Thành phần độc lập thứ 6

  CSS viết:

  p:last-child{
      color: blue;
  }

  Hiển thị trình duyệt khi đã có css:

  Thành phần thứ nhất

  Thành phần thứ 2

  Thành phần thứ 3

  Thành phần thứ 4

  Thành phần thứ 5

  Thành phần thứ 6

  Thành phần thứ nhất

  Thành phần thứ 2

  Thành phần thứ 3

  Thành phần thứ 4

  Thành phần thứ 5

  Thành phần thứ 6

  Thành phần thứ nhất

  • ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
  • ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2

  Thành phần thứ 3

  Thành phần thứ 4

  Thành phần thứ 5

  Thành phần thứ 6

  Thành phần độc lập thứ nhất

  Thành phần độc lập thứ 2

  Thành phần độc lập thứ 3

  Thành phần độc lập thứ 4

  Thành phần độc lập thứ 5

  Thành phần độc lập thứ 6

  Ta thấy những thành phần

  ở vị trí cuối cùng có thành phần cha đều đã được chọn.

  Trình duyệt hỗ trợ

  ":last-child" được hỗ trợ trong đa số các trình duyệt, ngoài trừ trình duyệt Internet Explorer 8 trở xuống.