Pseudo-class trong CSS: nth-child, not, first-child, focus

Pseudo-class là gì

Pseudo-class là một từ khóa đứng sau dấu hai chấm, chọn phần tử theo vị trí trong tài liệu hoặc theo trạng thái của nó. Bạn gắn nó vào một selector thông thường: li:first-child, input:focus, a:hover.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pseudo-classes</title>
  <style>
    li { padding: 6px 10px; list-style: none; }
    li:nth-child(odd) { background: #e5e7eb; }       /* zebra stripes */
    li:first-child { font-weight: bold; }
    li:last-child { color: #2563eb; }
    li:not(.done) { border-inline-start: 4px solid #f59e0b; }
  </style>
</head>
<body>
  <ul>
    <li>First child: bold</li>
    <li class="done">Done: no amber edge</li>
    <li>Odd rows are gray</li>
    <li class="done">Done</li>
    <li>Last child: blue</li>
  </ul>
</body>
</html>

Các pseudo-class trạng thái cho liên kết và chuột (:hover, :active, :visited) có trang riêng, CSS hover.

:nth-child() và công thức an+b

:nth-child() nhận một con số, một từ khóa, hoặc công thức an+b. Trình duyệt thử n = 0, 1, 2, ... và khớp với mọi vị trí mà công thức tạo ra (vị trí bắt đầu từ 1).

Gõ một công thức và xem những mục nào khớp:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child tester</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(6, 40px); gap: 6px; padding: 0; }
    .grid li {
      list-style: none;
      height: 40px;
      display: grid;
      place-items: center;
      background: #e5e7eb;
      border-radius: 6px;
    }
  </style>
  <style id="live"></style>
</head>
<body>
  <label>li:nth-child( <input id="f" value="3n+1" size="8"> )</label>
  <ul class="grid" id="grid"></ul>
  <script>
    const grid = document.getElementById('grid');
    for (let i = 1; i <= 18; i++) grid.innerHTML += '<li>' + i + '</li>';
    const input = document.getElementById('f');
    const update = () => {
      document.getElementById('live').textContent =
        '.grid li:nth-child(' + input.value + ') { background: #2563eb; color: white; }';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Hãy thử odd, even, 4, n+7, -n+5 và 2n+3. Công thức không hợp lệ sẽ không khớp gì cả.

Phiên bản đếm từ cuối là :nth-last-child(): li:nth-last-child(-n+2) chọn hai mục cuối cùng.

nth-child và nth-of-type

:nth-child() đếm mọi phần tử anh em, bất kể thẻ gì, rồi mới kiểm tra phần còn lại của selector. :nth-of-type() chỉ đếm các phần tử anh em cùng thẻ. Khác biệt lộ ra ngay khi các phần tử anh em có nhiều loại thẻ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-of-type</title>
  <style>
    p, h2 { margin: 4px 0; padding: 4px 8px; }
    p:nth-child(2) { background: #f59e0b; }   /* 2nd child AND a p */
    p:nth-of-type(2) { color: #2563eb; font-weight: bold; } /* 2nd p */
  </style>
</head>
<body>
  <h2>Heading (child 1)</h2>
  <p>Paragraph 1, child 2: amber</p>
  <p>Paragraph 2, child 3: blue and bold</p>
  <p>Paragraph 3, child 4</p>
</body>
</html>

Các cặp tương tự cũng có cho hai đầu: :first-child / :first-of-type, :last-child / :last-of-type, :only-child / :only-of-type.

:not(), :is() và :where()

:not() là cái được dùng hằng ngày, ví dụ để đặt dấu phân cách giữa các mục nhưng không đặt sau mục cuối:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>not</title>
  <style>
    .tags { padding: 0; }
    .tags li { display: inline; list-style: none; }
    .tags li:not(:last-child)::after { content: " · "; color: #2563eb; }
    input:not([type="checkbox"]) { border: 2px solid #16a34a; }
  </style>
</head>
<body>
  <ul class="tags"><li>html</li><li>css</li><li>js</li></ul>
  <input type="text" placeholder="Text: green border">
  <input type="checkbox" aria-label="Checkbox, default border">
</body>
</html>

Pseudo-class trạng thái: focus, checked, disabled, invalid

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>States</title>
  <style>
    input { padding: 6px; border: 2px solid #e5e7eb; border-radius: 6px; outline: none; }
    input:focus-visible { border-color: #2563eb; }
    input:user-invalid { border-color: #f59e0b; }
    .field:focus-within label { color: #2563eb; }
    input:checked + label { text-decoration: line-through; color: #16a34a; }
    button:disabled { opacity: 0.4; }
  </style>
</head>
<body>
  <p class="field">
    <label for="mail">Email</label>
    <input id="mail" type="email" required placeholder="you@example.com">
  </p>
  <p>
    <input type="checkbox" id="task" checked>
    <label for="task">Checked task</label>
  </p>
  <button disabled>Disabled button</button>
</body>
</html>

Bấm vào ô email: nhãn của nó chuyển sang màu xanh nhờ :focus-within. Gõ thứ gì đó không phải email rồi rời ô: :user-invalid đổi viền sang màu hổ phách. Nếu chỉ dùng :invalid, ô bắt buộc còn trống đã bị tô màu hổ phách trước cả khi bạn chạm vào.

Dù bạn làm gì với :focus, hãy luôn giữ một kiểu focus nhìn thấy được. Xóa outline mà không có gì thay thế khiến người dùng bàn phím không biết mình đang ở đâu.

:has(), selector cho phần tử cha

:has() khớp với một phần tử dựa trên những gì nó chứa. Đây chính là "selector cho phần tử cha" được mong đợi từ lâu, và nó hoạt động trong Chrome, Firefox và Safari hiện nay.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>has</title>
  <style>
    .option { display: block; border: 2px solid #e5e7eb; padding: 8px; margin: 6px 0; border-radius: 6px; }
    .option:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <label class="option"><input type="radio" name="plan" checked> Monthly</label>
  <label class="option"><input type="radio" name="plan"> Yearly</label>
</body>
</html>

Chọn gói còn lại: cả thẻ thay đổi theo nút radio, không cần JavaScript.

Lỗi thường gặp

• Có dấu cách trước dấu hai chấm. li :first-child nghĩa là "phần tử con đầu tiên bên trong một li". Hãy viết li:first-child.
• Nghĩ rằng p:nth-child(1) là "thẻ p đầu tiên". Nó nghĩa là "phần tử con đầu tiên, nếu đó là thẻ p". Dùng :first-of-type để chọn thẻ p đầu tiên.
• Đếm từ 0. Vị trí bắt đầu từ 1: :nth-child(0) không khớp gì cả.
• Xóa outline khi focus. :focus { outline: none } mà không có gì thay thế sẽ làm hỏng việc điều hướng bằng bàn phím.
• Nhầm : với ::. :before là cách viết cũ của pseudo-element ::before; pseudo-class luôn dùng một dấu hai chấm.