Thuộc tính toàn cục HTML class

Try it

<p>Narrator: This is the beginning of the play.</p>

<p class="note editorial">Above point sounds a bit obvious. Remove/rewrite?</p>

<p>Narrator: I must warn you now folks that this beginning is very exciting.</p>

<p class="note">[Lights go up and wind blows; Caspian enters stage right]</p>

.note {
  font-style: italic;
  font-weight: bold;
}

.editorial {
  background: rgb(255 0 0 / 0.25);
  padding: 10px;
}

.editorial::before {
  content: "Editor: ";
}

Cú pháp

Thuộc tính class là danh sách các giá trị lớp được phân tách bằng khoảng trắng ASCII.

Mỗi giá trị lớp có thể chứa bất kỳ ký tự Unicode nào (ngoại trừ, tất nhiên, khoảng trắng ASCII). Tuy nhiên, khi được dùng trong bộ chọn CSS, từ JavaScript bằng API như Document.querySelector() hoặc trong stylesheet CSS, các giá trị thuộc tính class phải là CSS identifiers hợp lệ. Điều này có nghĩa là nếu giá trị thuộc tính class không phải là CSS identifier hợp lệ (ví dụ, my?class hoặc 1234) thì nó phải được thoát trước khi dùng trong bộ chọn, bằng phương thức CSS.escape() hoặc thủ công.

Vì lý do này, khuyến nghị các nhà phát triển chọn các giá trị cho thuộc tính class là CSS identifiers hợp lệ không cần thoát.

Mô tả

Các lớp cho phép CSS và JavaScript chọn và truy cập các phần tử cụ thể qua bộ chọn lớp hoặc các hàm như document.getElementsByClassName().

Mặc dù đặc tả không đặt yêu cầu về tên của các lớp, các nhà phát triển web được khuyến khích dùng các tên mô tả mục đích ngữ nghĩa của phần tử, thay vì việc trình bày của phần tử. Ví dụ, attribute để mô tả một thuộc tính thay vì italics, mặc dù phần tử của lớp này có thể được trình bày bằng chữ nghiêng. Tên ngữ nghĩa vẫn có logic ngay cả khi việc trình bày của trang thay đổi.

Đặc tả

Tương thích trình duyệt

Xem thêm

• Tất cả thuộc tính toàn cục.
• element.className
• element.classList
• Introduction to CSS