CSS selector: các loại, combinator và attribute selector

CSS selector là gì

Selector là phần đứng trước cặp ngoặc nhọn trong một quy tắc CSS. Nó quyết định các khai báo áp dụng lên những phần tử nào.

p.note { color: #2563eb; }
/* selector: p.note    declaration: color: #2563eb */

Năm selector cơ bản này đã đủ cho phần lớn stylesheet thực tế:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic selectors</title>
  <style>
    * { box-sizing: border-box; }           /* universal: every element */
    p { margin: 6px 0; }                    /* type: every <p> */
    .tip { background: #e5e7eb; padding: 6px; } /* class */
    #main-title { color: #2563eb; }         /* ID: one element */
    h2, .lead { font-style: italic; }       /* group: either one */
  </style>
</head>
<body>
  <h1 id="main-title">Selectors</h1>
  <p class="lead">A lead paragraph (grouped with h2).</p>
  <p class="tip">A tip, matched by .tip</p>
  <h2>A subheading</h2>
  <p>A plain paragraph.</p>
</body>
</html>

Tổng quan các loại selector

Class và ID có trang riêng: CSS class selector. Các pseudo-class như :nth-child() và :not() được giải thích ở trang pseudo-class.

Combinator: descendant và child

Combinator (bộ kết hợp) nối hai selector theo quan hệ của chúng trong cây HTML. Có tất cả bốn loại.

Dấu cách và dấu > là cặp hay bị nhầm nhất. Descendant selector đi sâu tới mọi cấp, còn child selector chỉ dừng ở một cấp:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Child selector</title>
  <style>
    li { padding: 2px 6px; margin: 2px 0; }
    .all li { background: #e5e7eb; }          /* descendant: every level */
    .direct > li { border-inline-start: 4px solid #2563eb; } /* child: top level only */
  </style>
</head>
<body>
  <ul class="all direct">
    <li>Top level: gray and blue edge</li>
    <li>Top level: gray and blue edge
      <ul>
        <li>Nested: gray only</li>
        <li>Nested: gray only</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Sibling combinator: + và ~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Siblings</title>
  <style>
    p { margin: 4px 0; padding: 4px 8px; }
    h2 + p { background: #f59e0b; }   /* only the first p after h2 */
    h2 ~ p { color: #2563eb; }        /* every p after h2 */
  </style>
</head>
<body>
  <p>Before the heading: untouched.</p>
  <h2>Heading</h2>
  <p>Right after h2: amber and blue.</p>
  <p>Later sibling: blue only.</p>
  <p>Later sibling: blue only.</p>
</body>
</html>

Sibling combinator chỉ nhìn về phía sau. Không có combinator "anh em đứng trước", nhưng :has() có thể diễn đạt điều đó: h2:has(+ p) khớp với một thẻ h2 có thẻ p đứng ngay sau.

Attribute selector

Cặp ngoặc vuông dùng để so khớp theo thuộc tính và giá trị của nó:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attribute selectors</title>
  <style>
    a { display: block; margin: 4px 0; }
    a[href^="https"] { color: #16a34a; }
    a[href$=".pdf"] { font-weight: bold; }
    a[href$=".pdf"]::after { content: " (PDF)"; }
    input[type="email"] { border: 2px solid #2563eb; }
    [data-state="open"] { background: #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <a href="https://example.com">External, https: green</a>
  <a href="/guide.pdf">Guide, bold with a label</a>
  <a href="/about">Relative link: untouched</a>
  <input type="email" placeholder="Email: blue border">
  <div data-state="open">data-state="open"</div>
</body>
</html>

Attribute selector trên các thuộc tính data-* là cách gọn gàng để định dạng trạng thái do JavaScript đặt, mà không cần đặt thêm tên class.

Thử bất kỳ selector nào

Gõ một selector vào ô nhập. Mọi phần tử khớp sẽ có viền màu hổ phách, và số lượng hiện ngay bên dưới.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selector tester</title>
  <style>
    .hit { outline: 3px solid #f59e0b; }
    #demo { border: 1px solid #e5e7eb; padding: 8px; margin-top: 8px; }
    #demo * { margin: 4px 0; }
  </style>
</head>
<body>
  <input id="sel" value="#demo li:nth-child(2)" size="30">
  <span id="out"></span>
  <div id="demo">
    <h2 class="title">Title</h2>
    <p class="intro">Intro <a href="/a">link</a></p>
    <ul>
      <li>One</li>
      <li class="active">Two</li>
      <li>Three <a href="https://example.com">external</a></li>
    </ul>
  </div>
  <script>
    const sel = document.getElementById('sel');
    const out = document.getElementById('out');
    const run = () => {
      document.querySelectorAll('.hit').forEach((el) => el.classList.remove('hit'));
      try {
        const found = document.querySelectorAll(sel.value);
        found.forEach((el) => el.classList.add('hit'));
        out.textContent = found.length + ' match(es)';
      } catch (e) {
        out.textContent = 'Invalid selector';
      }
    };
    sel.addEventListener('input', run);
    run();
  </script>
</body>
</html>

Thử #demo a, ul > li, h2 ~ *, a[href^="https"], li:not(.active).

Selector kết hợp và descendant: dấu cách rất quan trọng

p.note và p .note chỉ khác nhau một dấu cách nhưng mang nghĩa khác hẳn.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Space matters</title>
  <style>
    p.note { background: #e5e7eb; }      /* a p that has .note */
    p .note { color: #16a34a; font-weight: bold; } /* a .note inside a p */
  </style>
</head>
<body>
  <p class="note">p.note: gray background</p>
  <p>Plain p with a <span class="note">span.note inside</span></p>
</body>
</html>

Trình duyệt đọc selector thế nào

Khi nhiều quy tắc cùng khớp một phần tử và cùng đặt một thuộc tính, selector có độ ưu tiên (specificity) cao hơn sẽ thắng; nếu bằng nhau, quy tắc viết sau thắng. Một ID nặng hơn bất kỳ số lượng class nào, và một class nặng hơn bất kỳ số lượng type selector nào; trang !important có bảng specificity đầy đủ.

Nhóm selector có một điểm cần lưu ý: nếu một selector trong danh sách thường không hợp lệ, cả quy tắc sẽ bị bỏ qua. Với a, b:unknown { }, ngay cả các liên kết cũng không được định dạng. Bọc danh sách trong :is() sẽ khiến nó "dễ tính" hơn, nên :is(a, b:unknown) vẫn định dạng được các liên kết.

Lỗi thường gặp

• Thiếu dấu chấm hoặc dấu thăng. tip { } nhắm tới thẻ <tip>, không phải class="tip". Hãy viết .tip.
• Có dấu cách trong selector kết hợp. p .note không phải là p.note.
• Tưởng > chạm tới cả cấp cháu. Dùng dấu cách nếu muốn đi sâu mọi cấp.
• Một lỗi gõ làm hỏng cả nhóm. Với h1, h2:hovr, h3, không phần tử nào được định dạng.
• Selector quá dài. body div.wrapper ul li a vừa khó đọc vừa khó ghi đè. Thường thì một class là đủ.