Class selector và ID selector trong CSS (.class và #id)

Class selector

Class selector là một dấu chấm theo sau là tên class. Nó định dạng mọi phần tử có thuộc tính class chứa tên đó, bất kể loại phần tử.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Class selector</title>
  <style>
    .badge {
      background: #2563eb;
      color: white;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <p>New <span class="badge">beta</span></p>
  <h2>Release <span class="badge">v2</span></h2>
  <a class="badge" href="#">a link with the class</a>
</body>
</html>

Dấu chấm chỉ xuất hiện trong CSS. Trong HTML, thuộc tính là class="badge", không có dấu chấm. Tên class phân biệt chữ hoa chữ thường: .Badge không khớp với class="badge".

Nhiều class trên một phần tử

Một phần tử có thể mang bao nhiêu class cũng được, cách nhau bằng dấu cách. Mỗi class mang theo quy tắc riêng, và đó là cách bạn ghép các biến thể từ những mảnh nhỏ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple classes</title>
  <style>
    .btn {
      border: 2px solid #2563eb;
      background: white;
      color: #2563eb;
      padding: 8px 14px;
      border-radius: 6px;
    }
    .primary { background: #2563eb; color: white; }
    .large { font-size: 20px; }

    /* chained: only elements with BOTH classes */
    .btn.danger { border-color: #f59e0b; color: #111827; background: #f59e0b; }
  </style>
</head>
<body>
  <button class="btn">Default</button>
  <button class="btn primary">Primary</button>
  <button class="btn primary large">Primary large</button>
  <button class="btn danger">Danger</button>
  <span class="danger">.danger alone: no style</span>
</body>
</html>

.btn.danger, không có dấu cách, khớp với phần tử có cả hai class. Thẻ span cuối cùng có danger nhưng không có btn, nên quy tắc nối liền bỏ qua nó.

Các biến thể của class selector

Sự khác nhau giữa có dấu cách và không có dấu cách được trình bày cùng các combinator khác ở trang CSS selector.

ID selector

ID selector là một dấu thăng theo sau là id: #site-header định dạng phần tử có id="site-header". Id phải là duy nhất trong trang, nên ID selector nhắm đúng một phần tử.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ID selector</title>
  <style>
    #summary {
      border: 2px solid #16a34a;
      padding: 10px;
      border-radius: 6px;
    }
    #details { margin-top: 8px; background: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <div id="summary">Styled by #summary</div>
  <div id="details">Styled by #details</div>
</body>
</html>

Id không chỉ để định dạng: href="#details" cuộn tới phần tử đó, <label for="email"> trỏ tới id của một ô nhập, và JavaScript tìm nó bằng document.getElementById('details'). Đó mới là lý do thường gặp để gán id cho một phần tử; còn để định dạng thì class là công cụ tốt hơn.

Class và ID

Khoảng cách về độ ưu tiên (specificity) là lý do thực tế để định dạng bằng class. Một ID thắng bất kỳ số lượng class nào, nên quy tắc viết bằng ID chỉ có thể bị ghi đè bởi một ID khác, một style inline hoặc !important:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #promo { background: #e5e7eb; padding: 10px; }
    .card.featured.highlight { background: #f59e0b; } /* three classes */
  </style>
</head>
<body>
  <div id="promo" class="card featured highlight">
    Still gray: the ID beats three classes.
  </div>
</body>
</html>

Thêm và xóa class bằng JavaScript

Class là cách thông thường để JavaScript thay đổi giao diện: CSS định nghĩa các trạng thái, script chỉ việc chuyển đổi giữa chúng.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>classList</title>
  <style>
    .panel { border: 2px solid #e5e7eb; padding: 10px; border-radius: 6px; }
    .panel.open { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <button id="toggle">Toggle .open</button>
  <div class="panel" id="panel">The panel.</div>
  <script>
    const panel = document.getElementById('panel');
    document.getElementById('toggle').addEventListener('click', () => {
      panel.classList.toggle('open');
      panel.textContent = 'class="' + panel.className + '"';
    });
  </script>
</body>
</html>

classList còn có add, remove, contains và replace. Tránh gán trực tiếp cho className: nó thay thế mọi class mà phần tử đang có.

Đặt tên class

• Chữ cái, chữ số, dấu gạch ngang và dấu gạch dưới đều an toàn: card, card-title, card__title, is-open.
• Đừng bắt đầu selector bằng một chữ số hoặc dấu gạch ngang theo sau là chữ số. .2col là CSS không hợp lệ. Hãy bắt đầu bằng một chữ cái (.cols-2) hoặc escape chữ số đó (.\32 col).
• Đặt tên theo mục đích, không theo vẻ ngoài: .error vẫn đúng sau khi thiết kế lại, còn .red-text thì không.
• Một quy ước đặt tên sẽ giúp ích cho các dự án lớn hơn. BEM viết theo dạng block__element--modifier, ví dụ .card__title--large.

Lỗi thường gặp

• Đặt dấu chấm trong HTML. class=".badge" không bao giờ khớp với .badge.
• Hai thuộc tính class. <p class="a" class="b"> chỉ giữ a. Hãy dùng class="a b".
• Có dấu cách trong khi bạn muốn chọn phần tử có cả hai class. .btn .primary tìm một phần tử lồng bên trong; .btn.primary là cùng một phần tử.
• Dùng lại một id. Id trùng lặp làm hỏng getElementById, liên kết neo và việc gắn label, ngay cả khi CSS có vẻ vẫn chạy.
• Định dạng mọi thứ bằng id. Độ ưu tiên cao của id khiến việc ghi đè về sau rất khổ sở; hãy dùng class.