Vai trò bộ chọn :nth-last-child(n) trong CSS

Bộ chọn :nth-last-child(n)

Chọn phần tử là con thứ n của phần tử cha, tính từ con cuối cùng. Khác với :nth-last-of-type chỉ tính theo loại phần tử.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    p:nth-last-child(4) {
      background: blue;
      color: white;
    }
  </style>
</head>
<body>
  <p>Văn bản 1</p>
  <p>Văn bản 2</p>
  <p>Văn bản 3</p>
  <p>Văn bản 4</p>
  <p>Văn bản 5</p>
  <p>Văn bản 6</p>
</body>
</html>

Tính từ cuối: 6, 5, 4, 3... → Con thứ 4 từ cuối là "Văn bản 3". Nó sẽ có nền xanh, chữ trắng.