Vanhiep.NET - Chuyên gia Thiết kế Website & Ứng dụng

CSS Selectors: Hướng Dẫn Chi Tiết Cách Chọn Phần Tử (Class, ID, Tag, Attribute)

Chủ nhật, Ngày 01/06/2025 15:22
☰

Nắm vững CSS Selectors: Hướng dẫn chi tiết cách chọn phần tử HTML bằng Class, ID, Tag, Attribute và Pseudo-classes. Tối ưu giao diện web của bạn ngay hôm nay!

Cách chọn phần tử (Selectors): Nắm vững công cụ định hình giao diện web

Trong thế giới phát triển web, CSS (Cascading Style Sheets) đóng vai trò then chốt trong việc định hình giao diện và trải nghiệm người dùng. Để CSS có thể "tô điểm" cho trang web của bạn một cách chính xác, chúng ta cần một cơ chế để "chọn" các phần tử HTML mà chúng ta muốn áp dụng kiểu dáng. Cơ chế đó chính là selectors (bộ chọn).

Bài viết này sẽ đi sâu vào các loại selectors phổ biến nhất, giúp bạn nắm vững công cụ mạnh mẽ này để tạo ra những trang web đẹp mắt và có tổ chức.

---

1. Tại sao selectors lại quan trọng?

Hãy tưởng tượng bạn có một ngôi nhà lớn với nhiều phòng, nhiều đồ đạc. Nếu bạn muốn sơn lại một bức tường cụ thể, bạn cần phải chỉ rõ "bức tường ở phòng khách, phía tây". Tương tự, trong HTML, bạn có thể có hàng trăm, hàng nghìn phần tử. Selectors chính là cách bạn "chỉ" vào phần tử (hoặc nhóm phần tử) mà bạn muốn áp dụng các quy tắc CSS.

Nếu không có selectors, CSS sẽ không biết nên áp dụng kiểu dáng cho phần tử nào, dẫn đến việc không thể tùy chỉnh giao diện trang web một cách linh hoạt.

---

2. Các loại selectors cơ bản

Có nhiều loại selectors khác nhau, mỗi loại phù hợp với một mục đích sử dụng cụ thể. Dưới đây là các loại phổ biến nhất:

2.1. Bộ chọn Phần tử (Element/Tag Selector)

  • Cú pháp: tên_thẻ { /* các quy tắc CSS */ }
  • Mô tả: Đây là bộ chọn đơn giản nhất, áp dụng kiểu dáng cho tất cả các phần tử có cùng tên thẻ HTML.
  • Ví dụ: 
    <h1>Tiêu đề trang</h1>
<p>Đây là một đoạn văn.</p>
<p>Đây là một đoạn văn khác.</p>
    h1 {
    color: blue;
    font-size: 36px;
}

p {
    font-family: Arial, sans-serif;
    line-height: 1.5;
}
    • Giải thích: Mọi thẻ <h1> trên trang sẽ có màu xanh và kích thước chữ 36px. Mọi thẻ <p> sẽ có font Arial và chiều cao dòng 1.5.
  • Khi sử dụng: Khi bạn muốn áp dụng một kiểu dáng chung cho tất cả các instance của một phần tử HTML cụ thể.

2.2. Bộ chọn ID (ID Selector)

  • Cú pháp: #tên_id { /* các quy tắc CSS */ }
  • Mô tả: Áp dụng kiểu dáng cho một phần tử duy nhất trên trang có thuộc tính id khớp với tên_id. Lưu ý quan trọng: Mỗi id phải là duy nhất trên một trang HTML.
  • Ví dụ: 
    <div id="header">
    <h1>Chào mừng bạn đến với trang web của tôi</h1>
</div>
<p id="introduction">Đây là phần giới thiệu.</p>
    #header {
    background-color: #f0f0f0;
    padding: 20px;
    text-align: center;
}

#introduction {
    font-style: italic;
    color: #555;
}
    • Giải thích: Phần tử div có id="header" sẽ có nền xám nhạt, padding 20px và căn giữa chữ. Đoạn văn có id="introduction" sẽ được in nghiêng và có màu xám đậm.
  • Khi sử dụng: Khi bạn cần định kiểu cho một phần tử HTML cụ thể, duy nhất trên trang mà không có phần tử nào khác có cùng kiểu dáng đó.

2.3. Bộ chọn Lớp (Class Selector)

  • Cú pháp: .tên_class { /* các quy tắc CSS */ }
  • Mô tả: Áp dụng kiểu dáng cho tất cả các phần tử có thuộc tính class chứa tên_class. Một phần tử có thể có nhiều class.
  • Ví dụ: 
    <p class="highlight">Đây là một đoạn văn quan trọng.</p>
<div class="card highlight">
    <h2>Tiêu đề thẻ</h2>
    <p>Nội dung thẻ.</p>
</div>
<span class="warning-text">Cảnh báo!</span>
    .highlight {
    background-color: yellow;
    font-weight: bold;
}

.card {
    border: 1px solid #ccc;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.warning-text {
    color: red;
    text-transform: uppercase;
}
    • Giải thích: Các phần tử có class="highlight" (cả đoạn văn và div) sẽ có nền vàng và chữ in đậm. Phần tử div có class="card" sẽ có border, padding, margin và bo góc. Phần tử span có class="warning-text" sẽ có chữ màu đỏ và viết hoa.
  • Khi sử dụng: Khi bạn muốn áp dụng một kiểu dáng giống nhau cho nhiều phần tử khác nhau trên trang, hoặc khi một phần tử cần áp dụng nhiều kiểu dáng khác nhau thông qua các lớp.

2.4. Bộ chọn Thuộc tính (Attribute Selector)

  • Cú pháp:
    • [thuộc_tính] : Chọn các phần tử có thuộc tính được chỉ định.
    • [thuộc_tính="giá_trị"] : Chọn các phần tử có thuộc tính và giá trị cụ thể.
    • [thuộc_tính~="giá_trị"] : Chọn các phần tử có thuộc tính chứa một từ cụ thể trong danh sách các từ được phân tách bằng khoảng trắng.
    • [thuộc_tính^="giá_trị"] : Chọn các phần tử có thuộc tính bắt đầu bằng giá_trị.
    • [thuộc_tính$="giá_trị"] : Chọn các phần tử có thuộc tính kết thúc bằng giá_trị.
    • [thuộc_tính*="giá_trị"] : Chọn các phần tử có thuộc tính chứa giá_trị ở bất kỳ đâu.
  • Mô tả: Cho phép bạn chọn phần tử dựa trên sự hiện diện của một thuộc tính HTML hoặc giá trị cụ thể của thuộc tính đó.
  • Ví dụ: 
    <a href="https://example.com" target="_blank">Trang web ngoài</a>
<a href="/internal-page">Trang nội bộ</a>
<input type="text" placeholder="Nhập tên">
<input type="submit" value="Gửi đi">
<img src="image1.png" alt="Ảnh 1">
<img src="icon_home.svg" alt="Icon Home">
    a[target="_blank"] {
    color: orange;
}

input[type="text"] {
    border: 1px solid blue;
}

input[type="submit"] {
    background-color: green;
    color: white;
}

img[src$=".svg"] {
    width: 24px;
    height: 24px;
}

a[href^="https"] {
    text-decoration: none;
}
    • Giải thích:
      • Các thẻ <a> có thuộc tính target="_blank" sẽ có màu cam.
      • Các thẻ <input> có type="text" sẽ có border màu xanh.
      • Các thẻ <input> có type="submit" sẽ có nền xanh lá cây và chữ trắng.
      • Các thẻ <img> có thuộc tính src kết thúc bằng .svg sẽ có kích thước 24x24px.
      • Các thẻ <a> có thuộc tính href bắt đầu bằng https sẽ không có gạch chân.
  • Khi sử dụng: Khi bạn muốn định kiểu cho các phần tử dựa trên các thuộc tính HTML của chúng, đặc biệt hữu ích khi làm việc với các form, liên kết hoặc hình ảnh.

---

3. Các loại selectors phức tạp hơn

Ngoài các loại cơ bản, CSS còn cung cấp các selectors mạnh mẽ hơn để kết hợp các bộ chọn hoặc chọn phần tử dựa trên mối quan hệ của chúng trong cấu trúc DOM.

3.1. Bộ chọn Tổ hợp (Combinators)

Bộ chọn tổ hợp cho phép bạn chọn các phần tử dựa trên mối quan hệ giữa chúng.

  • Bộ chọn Con cháu (Descendant Selector): selector1 selector2 { /* CSS */ }
    • Chọn selector2 là con cháu của selector1 (có thể lồng sâu bên trong).
    • Ví dụ: div p { color: purple; } (Chọn tất cả các thẻ <p> nằm bên trong thẻ <div>)
  • Bộ chọn Con trực tiếp (Child Selector): selector1 > selector2 { /* CSS */ }
    • Chọn selector2 là con trực tiếp của selector1.
    • Ví dụ: ul > li { list-style-type: square; } (Chỉ chọn các thẻ <li> là con trực tiếp của thẻ <ul>)
  • Bộ chọn Anh em kề cận (Adjacent Sibling Selector): selector1 + selector2 { /* CSS */ }
    • Chọn selector2 là phần tử anh em đứng ngay sau selector1 và có cùng cấp độ.
    • Ví dụ: h2 + p { margin-top: 0; } (Chọn thẻ <p> ngay sau thẻ <h2> cùng cấp độ)
  • Bộ chọn Anh em chung (General Sibling Selector): selector1 ~ selector2 { /* CSS */ }
    • Chọn selector2 là phần tử anh em đứng sau selector1 (không cần kề cận) và có cùng cấp độ.
    • Ví dụ: h2 ~ p { border-bottom: 1px dotted gray; } (Chọn tất cả các thẻ <p> đứng sau thẻ <h2> cùng cấp độ)

3.2. Bộ chọn Giả lớp (Pseudo-classes)

Pseudo-classes cho phép bạn chọn các phần tử dựa trên trạng thái của chúng, thay vì cấu trúc cây tài liệu.

  • :hover: Chọn phần tử khi con trỏ chuột di chuyển qua.
    • Ví dụ: a:hover { color: red; } (Thay đổi màu chữ của liên kết thành đỏ khi rê chuột qua)
  • :active: Chọn phần tử khi đang được kích hoạt (nhấn chuột).
    • Ví dụ: button:active { background-color: #333; }
  • :focus: Chọn phần tử khi nó đang nhận được sự tập trung (ví dụ: ô input được chọn).
    • Ví dụ: input:focus { outline: 2px solid blue; }
  • :nth-child(n) / :nth-of-type(n): Chọn phần tử con thứ n trong nhóm anh em.
    • Ví dụ: li:nth-child(even) { background-color: #eee; } (Chọn các <li> chẵn)
  • :first-child / :last-child: Chọn phần tử con đầu tiên/cuối cùng.
  • :not(selector): Chọn các phần tử không khớp với selector được chỉ định.
    • Ví dụ: p:not(.highlight) { color: black; } (Chọn các đoạn văn không có class "highlight")
  • Và nhiều loại pseudo-classes khác như :visited, :checked, :disabled, :empty, v.v.

3.3. Bộ chọn Giả phần tử (Pseudo-elements)

Pseudo-elements cho phép bạn tạo kiểu cho một phần của phần tử không có trong cây DOM thực tế.

  • ::before: Chèn nội dung ảo trước nội dung của phần tử.
    • Ví dụ: p::before { content: "Lưu ý: "; font-weight: bold; }
  • ::after: Chèn nội dung ảo sau nội dung của phần tử.
    • Ví dụ: a::after { content: " (" attr(href) ")"; } (Hiển thị URL sau liên kết)
  • ::first-line: Chọn dòng đầu tiên của một khối văn bản.
  • ::first-letter: Chọn chữ cái đầu tiên của một khối văn bản.
  • ::selection: Chọn văn bản được người dùng highlight.

---

4. Thứ tự ưu tiên (Specificity) của selectors

Khi nhiều quy tắc CSS cùng áp dụng cho một phần tử, trình duyệt sẽ quyết định quy tắc nào được áp dụng dựa trên thứ tự ưu tiên (specificity). Thứ tự ưu tiên được tính dựa trên số lượng ID, class và tên thẻ trong selector.

  • ID Selector có thứ tự ưu tiên cao nhất.
  • Class Selector và Attribute Selector có thứ tự ưu tiên trung bình.
  • Element Selector có thứ tự ưu tiên thấp nhất.
  • Quy tắc được định nghĩa sau cùng trong CSS sẽ ghi đè lên các quy tắc trước đó nếu chúng có cùng thứ tự ưu tiên.
  • Thuộc tính !important sẽ ghi đè lên tất cả các quy tắc khác (nên hạn chế sử dụng vì nó gây khó khăn trong việc debug và bảo trì).

Ví dụ về thứ tự ưu tiên:

<p id="myParagraph" class="text-red">Đây là một đoạn văn.</p>
p {
    color: green; /* Thấp nhất */
}

.text-red {
    color: red; /* Cao hơn element */
}

#myParagraph {
    color: blue; /* Cao nhất */
}

Trong trường hợp này, đoạn văn sẽ có màu xanh dương vì selector ID có thứ tự ưu tiên cao nhất.

---

5. Thực hành là chìa khóa

Cách tốt nhất để nắm vững selectors là thực hành. Hãy thử nghiệm với các loại selectors khác nhau, kết hợp chúng lại và quan sát kết quả trên trình duyệt. Bạn sẽ nhanh chóng nhận ra sức mạnh và sự linh hoạt của công cụ này trong việc xây dựng giao diện web.

---

Kết luận

Selectors là xương sống của CSS, cho phép bạn nhắm mục tiêu và định kiểu chính xác các phần tử HTML. Bằng cách hiểu rõ các loại selectors cơ bản, nâng cao và cách thứ tự ưu tiên hoạt động, bạn sẽ có khả năng tạo ra các trang web có giao diện đẹp mắt, linh hoạt và dễ bảo trì. Hãy tận dụng tối đa sức mạnh của selectors để nâng cao kỹ năng phát triển web của bạn!

Bài viết liên quan

BÀI VIẾT NỔI BẬT