Chọn phần tử có id="tutorials" với CSS

Bộ chọn ID trong CSS (#id)

Để chọn một phần tử duy nhất dựa trên thuộc tính id, CSS cung cấp bộ chọn #id. Vì id phải duy nhất trong trang, bộ chọn này chỉ khớp với tối đa một phần tử.

Cú pháp

#ten-id {
  /* Các quy tắc CSS */
}

Ví dụ minh họa

Áp dụng viền đỏ cho đoạn văn có id="tutorials":

<!DOCTYPE html>
<html>
<head>
  <style>
    #tutorials {
      border: 3px solid red;
    }
  </style>
</head>
<body>
  <h1>Tutorialspoint</h1>
  <h2>Learning</h2>
  <p id="tutorials">Tutorials on web dev, programming, database, networking, etc.</p>
  <p>Every tutorials has lessons with illustrations and figures.</p>
</body>
</html>

Đặc điểm quan trọng

• Độ đặc hiệu cao: #id có độ đặc hiệu (specificity) cao hơn class và element selector.
• Duy nhất: Mỗi trang chỉ nên có một phần tử với cùng một ID.
• JavaScript: Cũng dùng ID để truy xuất phần tử qua document.getElementById().

Khi nào nên dùng ID vs Class?

Dùng ID cho các phần tử duy nhất, quan trọng về cấu trúc (header, footer, main-nav). Dùng class cho các kiểu dáng lặp lại, có thể áp dụng cho nhiều phần tử.