Bài 2. Bộ chọn CSS

Bộ chọn là “địa chỉ” để CSS tìm đúng phần tử cần định dạng. Bài này hệ thống các bộ chọn cơ bản, bộ chọn kết hợp (combinator), bộ chọn thuộc tính và nhóm bộ chọn.

45 phútCơ bản
Bạn sẽ học được
  • Dùng bộ chọn thẻ, class, id, toàn cục
  • Kết hợp bộ chọn con, hậu duệ, anh em
  • Chọn theo thuộc tính
  • Nhóm và lồng bộ chọn hợp lý

Một số khái niệm

Một trang có hàng trăm phần tử; bộ chọn càng rõ ý nghĩa và ít phụ thuộc cấu trúc thì CSS càng dễ bảo trì. Quy ước tốt: định dạng chủ yếu bằng class; hạn chế id (ưu tiên quá cao) và chuỗi bộ chọn dài.

Bộ chọnVí dụChọn
ThẻpMọi thẻ p
Class.canh-baoPhần tử có class canh-bao
Id#dau-trangPhần tử có id dau-trang
Toàn cục*Mọi phần tử
Nhómh1, h2, h3Nhiều bộ chọn cùng quy tắc
Ghépp.ghi-chuThẻ p có class ghi-chu

Bộ chọn kết hợp (combinator)

<style>
  .menu a { color: #1565c0; }            /* hậu duệ: mọi a bên trong .menu */
  .menu > li { list-style: square; }       /* con trực tiếp */
  h3 + p { font-weight: bold; }           /* anh em liền kề: p ngay sau h3 */
  h3 ~ p { color: #2e7d32; }              /* mọi p đứng sau h3 cùng cha */
</style>
<ul class="menu"><li><a href="#">Trang chủ</a></li><li><a href="#">Khóa học</a></li></ul>
<h3>Tiêu đề</h3><p>Đoạn ngay sau h3: đậm và xanh</p><p>Đoạn sau nữa: chỉ xanh</p>
Kết quả hiển thị

Bộ chọn thuộc tính

<style>
  a[target="_blank"]::after { content: " ↗"; }
  a[href^="https"] { color: green; }       /* bắt đầu bằng */
  a[href$=".pdf"] { color: crimson; }      /* kết thúc bằng */
  a[href*="tuhoctin"] { font-weight: 700; }/* chứa */
  input[type="email"] { border: 2px solid #1565c0; }
</style>
<p><a href="https://tuhoctin.net" target="_blank">tuhoctin (mở tab mới)</a> ·
<a href="/giao-trinh.pdf">giáo trình PDF</a></p>
<input type="email" placeholder="email">
Kết quả hiển thị

Nhóm, lồng và :is() / :where()

/* Nhóm */
h1, h2, h3 { font-family: "Bai Jamjuree", sans-serif; }

/* :is() rút gọn nhóm dài */
:is(header, footer) a:hover { text-decoration: underline; }

/* :where() giống :is() nhưng độ ưu tiên = 0, dễ ghi đè */
:where(.card) p { margin: 0; }

/* Lồng (CSS nesting, hỗ trợ ở trình duyệt hiện đại) */
.card {
  padding: 16px;
  & h3 { margin-top: 0; }
  &:hover { box-shadow: 0 4px 12px rgb(0 0 0 / .1); }
}
Mẹo hay

Đặt tên class theo vai trò, ví dụ .nut-chinh, .the-khoa-hoc; nhiều dự án dùng quy ước BEM: .card__title, .card--noi-bat (bài 22).

Lưu ý

Bộ chọn quá dài như body div.main ul li a span vừa chậm, vừa dễ vỡ khi đổi HTML, lại có độ ưu tiên cao khó ghi đè.

Thực hành
  1. Định dạng mọi liên kết trong .menu thành màu trắng, nền xanh.
  2. Tô đỏ các liên kết tới tệp .pdf và .docx bằng bộ chọn thuộc tính.
  3. Làm đậm đoạn văn đầu tiên ngay sau mỗi h2.
  4. Viết lại một nhóm bộ chọn dài bằng :is().
Tóm tắt bài học
  • Thẻ, .class, #id, *, nhóm bằng dấu phẩy.
  • Kết hợp: dấu cách (hậu duệ), > (con), + (liền kề), ~ (anh em).
  • [attr], [attr^=], [attr$=], [attr*=].
  • :is(), :where(), nesting giúp CSS gọn.