Bài 2: Selector cơ bản – theo thẻ, class và id

🔗 Bài học khác trong chuyên mục:

1. Selector là gì?

Selector (bộ chọn) trong CSS là cách để chọn ra phần tử HTML nào sẽ được áp dụng style.
CSS không tự hiểu bạn muốn thay đổi thẻ nào, nên bạn cần “chỉ định rõ” mục tiêu bằng selector.

2. Các loại selector cơ bản nhất

a. Selector theo thẻ (element selector)

p {
  color: blue;
}

→ Áp dụng cho tất cả thẻ <p> trong trang.

b. Selector theo class

.title {
  font-weight: bold;
  font-size: 24px;
}

→ Áp dụng cho bất kỳ phần tử HTML nào có class là title.

HTML tương ứng:

<h1 class="title">Xin chào</h1>
<p class="title">Đây là một đoạn nổi bật</p>

Dấu chấm . đứng trước tên class trong CSS.

c. Selector theo id

#main {
  background-color: #f0f0f0;
}

→ Áp dụng cho duy nhất phần tử có id="main"

HTML tương ứng:

<div id="main">Đây là phần chính</div>

Dấu thăng # đứng trước tên id trong CSS.

3. So sánh class và id

Tiêu chí	Class	ID
Ký hiệu	`.` (dấu chấm)	`#` (dấu thăng)
Dùng nhiều lần?	Có thể dùng nhiều phần tử	Chỉ nên dùng 1 lần trong trang
Ví dụ	`.box`	`#header`

Gợi ý: Trong thực tế, nên ưu tiên dùng class để tái sử dụng.

4. Có thể kết hợp selector không?

Có. Một số ví dụ:

h1.title {
  color: red;
}

→ Chỉ áp dụng cho thẻ <h1> có class title.

#main p {
  line-height: 1.6;
}

→ Áp dụng cho các thẻ <p> nằm bên trong phần tử có id="main".

5. Thực hành

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Bài 2 - Selector cơ bản</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1 class="title">Chào mừng đến với CSS</h1>

  <div id="main">
    <p>Đây là đoạn văn không có class.</p>
    <p class="highlight">Đây là đoạn văn nổi bật.</p>
  </div>

</body>
</html>

style.css:

p {
  color: #333;
  font-size: 16px;
}

.title {
  color: darkblue;
  font-size: 28px;
}

.highlight {
  background-color: yellow;
}

#main {
  border: 2px solid gray;
  padding: 20px;
}

6. Ghi nhớ

Loại selector	Cách viết	Áp dụng cho gì?
Theo thẻ	`p {}`	Tất cả thẻ `<p>`
Theo class	`.box {}`	Bất kỳ phần tử có class=”box”
Theo id	`#menu {}`	Duy nhất phần tử có id=”menu”

Bài học trước ← Bài 1: Giới thiệu CSS và cách kết nối CSS với HTML Bài học tiếp theo Bài 3: Cách dùng màu sắc trong CSS – từ đơn giản đến chuyên nghiệp →