London
  
London is the capital of England.

Sử dụng thuộc tính lớp trên các phần tử nội tuyến

Thuộc tính lớp cũng có thể được sử dụng trên các phần tử nội tuyến.

Ví dụ

My Important Heading
This is some important text.

Ghi chú. Thuộc tính lớp có thể được sử dụng trên mọi phần tử HTML. Tên lớp có phân biệt chữ hoa, chữ thường.

Element section select with the class tool

Trong CSS, để chọn phần tử với lớp cụ thể, đặt một dấu chấm (. ) trước tên lớp .

Ví dụ

Dùng CSS để định kiểu cho mọi phần tử có tên lớp là “thành phố”.

London
London is the capital of England.

Paris
Paris is the capital of France.

Tokyo
Tokyo is the capital of Japan.

Nhiều lớp trên một phần tử

Các phần tử HTML có thể sở hữu nhiều tên lớp , mỗi tên lớp phải được phân tách bằng khoảng trắng (dấu cách).

Ví dụ

Tạo kiểu các phần tử với tên lớp “thành phố”, và cũng tạo kiểu phần tử với tên class “main”

  
Nhiều Class

  
Cả ba tiêu đề đều có class tên "city". Tuy nhiên, London còn có thêm tên class "main" dùng để căn giữa văn bản

  
London

  
Paris

  
Tokyo

Trong ví dụ trên, phần tử < h2 > đầu tiên sở hữu cả hai lớp là “city” và “main” nên sẽ . class này.

Các thẻ khác nhau cũng có thể dùng chung tên lớp

Các thẻ khác nhau, như < h2 > và < p>, có thể tên class giống nhau, bằng cách đó chúng có cùng kiểu style.

Ví dụ

  
Thẻ khác nhau, nhưng cùng tên class

  
Kể cả nếu hai phần tử không có cùng tên thẻ, chúng có thể có cùng tên class, và có kiểu style giống nhau

  
Paris

  
Paris is the capital of France.

Sử dụng class thuộc tính trong JavaScript

Tên lớp cũng có thể được sử dụng bởi JavaScript để thực hiện các tác vụ nhất định cho phần tử với tên class cụ thể.

JavaScript có thể truy cập các phần tử với tên lớp cụ thể bằng phương thức getElementsByClassName().

Ví dụ

Khi người dùng nhấp vào nút sẽ ẩn mọi phần tử có tên lớp là “thành phố”

  
Sử dụng thuộc tính class trong JavaScript

  
Nhấn vào nút "Hide elements" để ẩn mọi phần tử có tên class là "city"

  Hide elements

  
London

  
London is the capital of England.

  
Paris

  
Paris is the capital of France.

  
Tokyo

  
Tokyo is the capital of Japan.

  

Trích nguồn từ. (https. //www. w3schools. com/html/html_classes. asp)