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

Bộ chọn :nth-last-of-type(n)

Bộ chọn :nth-last-of-type(n) chọn phần tử là con thứ n của loại phần tử đó, tính từ con cuối cùng của phần tử cha.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<head>
  <style>
    p:nth-last-of-type(2) {
      background: blue;
      color: white;
    }
  </style>
</head>
<body>
  <p>Đoạn văn bản 1.</p>
  <p>Đoạn văn bản 2.</p>
  <p>Đoạn văn bản 3.</p>
  <p>Đoạn văn bản 4.</p>
  <p>Đoạn văn bản 5.</p>
</body>
</html>

Trong ví dụ, đoạn văn bản thứ 4 (tính từ cuối: 5, 4, 3, 2, 1 → thứ 2 từ cuối là đoạn 4) sẽ có nền xanh và chữ trắng.