Bộ chọn lớp

Bài học 4 trên 15 trong khóa học Bộ chọn CSS của Coddy.

Bộ chọn lớp là một loại bộ chọn CSS dùng để chọn các phần tử có thuộc tính lớp cụ thể. Thuộc tính lớp là thuộc tính tùy chỉnh mà bạn có thể thêm vào các phần tử HTML để nhóm chúng lại với nhau.

Để chọn các phần tử có lớp cụ thể, bạn dùng dấu chấm (.) theo sau là tên lớp. Ví dụ, bộ chọn .my-class chọn tất cả phần tử có lớp my-class.

Đây là ví dụ về cách dùng bộ chọn lớp để định dạng một trang web:

.my-class {
  color: red;
  font-size: 2em;
}

Để thêm một lớp vào phần tử, hãy viết:

<div class="my-class"></div>

Quy tắc CSS này sẽ định dạng tất cả phần tử có lớp my-class thành màu đỏ và có cỡ chữ 2em.

Thử thách

Dễ

Tạo một trang web có ba phần tử h1.
Thêm một lớp vào phần tử h1 đầu tiên.
Thêm một lớp khác vào phần tử h1 thứ hai.
Dùng bộ chọn lớp CSS để định dạng phần tử h1 đầu tiên thành màu đỏ và có cỡ chữ 64px.
Dùng một bộ chọn lớp CSS khác để định dạng một phần tử h1 khác thành màu xanh dương và có cỡ chữ 32px.

Tự làm thử

<html>
<head>
  <title>Class Selector Exercise</title>
  <style>
    /* CSS Code goes here */
  </style>
</head>
<body>
  
</body>
</html>

Tất cả bài học trong Bộ chọn CSS

1Giới thiệu về CSS Selectors

Mục đích của CSS Selectors Vì sao chúng quan trọng?

4Bộ chọn thuộc tính

Giới thiệu về bộ chọn thuộc tính Sự hiện diện và giá trị chính xác Bộ chọn giá trị thuộc tính Bộ chọn giá trị thuộc tính II Bộ chọn giá trị thuộc tính III

2Bộ chọn đơn giản

Bộ chọn kiểuBộ chọn lớpBộ chọn ID Bộ chọn phổ quát

3Bộ chọn kết hợp

Bộ chọn phần tử con Bộ chọn phần tử hậu duệ Bộ chọn phần tử anh em liền kề Bộ chọn phần tử anh em tổng quát

Tự luyện tập: Playground Web