CSS Selector: Hướng Dẫn Toàn Tập Kèm Ví Dụ & Cheat Sheet

CSS Selector là gì và tại sao lại quan trọng?

CSS Selector: Hướng Dẫn Toàn Tập Kèm Ví Dụ & Cheat Sheet

Bạn đang muốn làm chủ CSS và tạo ra những giao diện web đẹp mắt? Chìa khóa đầu tiên chính là hiểu rõ về CSS selector. Chúng giống như những người chỉ đường, giúp bạn chọn chính xác phần tử HTML cần định dạng. Trong hướng dẫn toàn tập này, Da I Kin sẽ cùng bạn tìm hiểu tất cả các loại selector, từ cơ bản đến nâng cao, kèm ví dụ và một cheat sheet tiện lợi để bạn tra cứu bất cứ lúc nào.

Giới thiệu về CSS Selector

Hãy tưởng tượng trang web của bạn là một thành phố lớn, và các phần tử HTML (như tiêu đề, đoạn văn, hình ảnh) là những tòa nhà. CSS Selector chính là địa chỉ cụ thể giúp bạn tìm đến đúng tòa nhà mình muốn trang trí (thay đổi màu sắc, kích thước, vị trí…). Nếu không có selector, CSS sẽ không biết phải áp dụng các style vào đâu cả.

CSS Selector là gì?

Nói một cách đơn giản, CSS Selector là các quy tắc (patterns) dùng để lựa chọn các phần tử HTML mà bạn muốn áp dụng style. Chúng là phần đầu tiên trong một quy tắc CSS.

Ví dụ, trong đoạn code dưới đây, p chính là selector. Nó chọn tất cả các phần tử <p> (đoạn văn) trên trang và đổi màu chữ của chúng thành màu xanh.

p {
  color: blue;
}

Vai trò của Selector trong việc chọn và tạo kiểu cho phần tử HTML

Vai trò của selector là cực kỳ quan trọng. Chúng là cầu nối không thể thiếu giữa tài liệu HTML (cấu trúc) và biểu định kiểu CSS (trình bày). Nhờ có selector, bạn có thể:

  • Chọn lọc chính xác: Áp dụng style cho một phần tử duy nhất, một nhóm phần tử, hoặc tất cả các phần tử cùng loại.
  • Tạo sự nhất quán: Đảm bảo tất cả các nút bấm, tiêu đề, hay liên kết trên trang web của bạn có cùng một phong cách.
  • Viết code hiệu quả: Giảm thiểu việc lặp lại code bằng cách nhóm các selector lại với nhau.

Nắm vững selector chính là nắm vững cách giao tiếp hiệu quả với trang web của bạn.

CSS Selector là gì và tại sao lại quan trọng?
CSS Selector là gì và tại sao lại quan trọng?

5 Loại CSS Selector chính bạn cần nắm vững

Để dễ dàng làm chủ, chúng ta có thể chia CSS selector thành 5 nhóm chính. Mỗi nhóm có một cách tiếp cận và sức mạnh riêng. Việc hiểu rõ từng loại sẽ giúp bạn chọn đúng công cụ cho từng nhiệm vụ. Bạn có thấy sẵn sàng để tìm hiểu chúng chưa?

Đây là 5 loại selector mà chúng ta sẽ đi sâu vào trong bài viết này:

  • Simple Selectors (Bộ chọn đơn giản): Đây là nhóm cơ bản nhất, giúp bạn chọn các phần tử dựa trên tên thẻ, ID, hoặc class. Ví dụ: h1, #header, .button.
  • Combinator Selectors (Bộ chọn kết hợp): Nhóm này giúp bạn chọn các phần tử dựa trên mối quan hệ của chúng với các phần tử khác, như con, cháu, hoặc anh em. Ví dụ: div p, ul > li.
  • Pseudo-class Selectors (Lớp giả): Dùng để chọn các phần tử dựa trên một trạng thái cụ thể của chúng, chẳng hạn như khi người dùng di chuột qua. Ví dụ: :hover, :first-child.
  • Pseudo-element Selectors (Phần tử giả): Cho phép bạn tạo kiểu cho một phần cụ thể của một phần tử, như ký tự đầu tiên hoặc một dòng văn bản. Ví dụ: ::first-letter, ::before.
  • Attribute Selectors (Bộ chọn thuộc tính): Nhóm này chọn các phần tử dựa trên sự tồn tại hoặc giá trị của một thuộc tính nào đó. Ví dụ: a[target="_blank"].
5 Loại CSS Selector chính bạn cần nắm vững
5 Loại CSS Selector chính bạn cần nắm vững

Nhóm 1: Simple Selectors

Đây là những viên gạch đầu tiên khi bạn xây dựng kỹ năng CSS của mình. Chúng rất dễ hiểu và được sử dụng hàng ngày.

Chọn theo tên thẻ

Cách đơn giản nhất là chọn tất cả các phần tử của một loại thẻ HTML cụ thể. Bạn chỉ cần viết tên thẻ.

/* Chọn tất cả các thẻ h2 và đổi màu chữ */
h2 {
  color: navy;
}

Chọn một phần tử cụ thể với ID Selector

Khi bạn muốn nhắm đến một và chỉ một phần tử duy nhất trên trang, hãy dùng ID. Trong HTML, giá trị ID là duy nhất. Trong CSS, bạn sử dụng dấu thăng (#) để chọn theo ID.

<div id="main-header">Trang chủ</div>

#main-header {
  background-color: lightblue;
}

Chọn nhiều phần tử với Class Selector

Ngược lại với ID, class được dùng để nhóm nhiều phần tử có chung một style. Bạn có thể áp dụng cùng một class cho nhiều thẻ khác nhau. Trong CSS, bạn dùng dấu chấm (.) để bắt đầu một css class selector.

<p class="highlight">Đoạn văn này được làm nổi bật.</p>
<span class="highlight">Từ này cũng vậy.</span>

.highlight {
  font-weight: bold;
  color: orange;
}

Sự khác biệt chính giữa Class và ID Selector là gì?

Đây là điểm quan trọng cần nhớ:

  • ID: Là duy nhất. Mỗi ID chỉ nên xuất hiện một lần trên một trang. Dùng khi bạn cần tạo kiểu cho một phần tử đặc biệt, không lặp lại.
  • Class: Có thể tái sử dụng. Một class có thể được áp dụng cho nhiều phần tử. Dùng khi bạn muốn áp dụng cùng một style cho một nhóm các phần tử.

Bộ chọn Universal (*) trong CSS là gì?

Bộ chọn Universal, ký hiệu là dấu hoa thị (*), chọn tất cả mọi phần tử trên trang. Nó thường được dùng để reset lại các giá trị mặc định của trình duyệt.

/* Reset margin và padding cho tất cả các phần tử */
* {
  margin: 0;
  padding: 0;
}

Hãy cẩn thận khi dùng nó vì nó có thể ảnh hưởng đến hiệu suất trang.

Grouping Selector

Để tránh lặp lại code, bạn có thể nhóm nhiều selector lại với nhau bằng dấu phẩy (,). Tất cả các selector trong nhóm sẽ nhận cùng một bộ quy tắc CSS.

/* Thay vì viết 3 quy tắc riêng biệt */
h1 {
  font-family: Arial, sans-serif;
}
h2 {
  font-family: Arial, sans-serif;
}
p {
  font-family: Arial, sans-serif;
}

/* Bạn có thể nhóm chúng lại như thế này */
h1, h2, p {
  font-family: Arial, sans-serif;
}
Nhóm 1: Simple Selectors - Những bộ chọn cơ bản nhất
Nhóm 1: Simple Selectors – Những bộ chọn cơ bản nhất

Nhóm 2: Combinator Selectors

Khi trang web phức tạp hơn, bạn cần chọn các phần tử dựa trên vị trí và mối quan hệ của chúng trong cây HTML. Đó là lúc các css combinators phát huy tác dụng.

Descendant Selector

Bộ chọn này sử dụng một khoảng trắng để chọn các phần tử nằm bên trong một phần tử khác, bất kể chúng được lồng sâu bao nhiêu cấp.

<div class="container">
  <p>Đoạn văn này sẽ được chọn.</p>
  <section>
    <p>Đoạn văn này cũng được chọn.</p>
  </section>
</div>

.container p {
  color: green;
}

Child Selector (>)

Dấu lớn hơn (>) chỉ chọn các phần tử là con trực tiếp (con cấp 1) của một phần tử khác. Nó không chọn các cấp cháu chắt bên trong.

<ul id="main-menu">
  <li>Mục này được chọn.</li>
  <li>Mục này cũng được chọn.
    <ul>
      <li>Mục này thì KHÔNG được chọn.</li>
    </ul>
  </li>
</ul>

#main-menu > li {
  border-bottom: 1px solid #ccc;
}

Adjacent Sibling Selector (+)

Dấu cộng (+) chọn phần tử đầu tiên nằm ngay sau một phần tử khác và có cùng cấp (cùng cha).

<h2>Tiêu đề</h2>
<p>Đoạn văn này được chọn.</p>
<p>Đoạn văn này không được chọn.</p>

h2 + p {
  margin-top: 0;
}

General Sibling Selector (~)

Dấu ngã (~) có tác dụng rộng hơn. Nó chọn tất cả các phần tử anh em theo sau một phần tử cụ thể, miễn là chúng có cùng cha.

<h3>Thông báo</h3>
<p>Đoạn văn này được chọn.</p>
<div>Đây là một khối div.</div>
<p>Đoạn văn này cũng được chọn.</p>

h3 ~ p {
  background-color: lightyellow;
}
Nhóm 2: Combinator Selectors - Tạo mối quan hệ giữa các phần tử
Nhóm 2: Combinator Selectors – Tạo mối quan hệ giữa các phần tử

Nhóm 3: Pseudo-class Selectors

Các css pseudo-classes cho phép bạn tạo kiểu cho các phần tử không chỉ dựa vào cấu trúc HTML mà còn dựa vào trạng thái của chúng, ví dụ như hành động của người dùng hay vị trí của phần tử.

Lớp giả cho liên kết và hành động: :hover, :link, :active

Đây là những lớp giả bạn sẽ gặp thường xuyên nhất. Chúng giúp giao diện người dùng trở nên sinh động và có tính tương tác hơn.

  • :link – Chọn các liên kết chưa được người dùng truy cập.
  • :visited – Chọn các liên kết đã được truy cập.
  • :hover – Chọn phần tử khi người dùng di chuột qua nó.
  • :active – Chọn phần tử khi nó đang được người dùng nhấn (click).
a:link {
  color: blue;
}
a:hover {
  color: red;
  text-decoration: underline;
}
a:active {
  color: purple;
}

Lớp giả cấu trúc: :first-child, :last-child, :nth-child(n)

Các lớp giả này chọn phần tử dựa trên vị trí của chúng trong một nhóm anh em.

  • :first-child – Chọn phần tử đầu tiên trong nhóm anh em.
  • :last-child – Chọn phần tử cuối cùng trong nhóm anh em.
  • :nth-child(n) – Một bộ chọn cực kỳ linh hoạt. Bạn có thể chọn phần tử ở vị trí thứ n. Ví dụ:
    • li:nth-child(3): Chọn mục li thứ ba.
    • li:nth-child(2n) hoặc li:nth-child(even): Chọn các mục li ở vị trí chẵn.
    • li:nth-child(2n+1) hoặc li:nth-child(odd): Chọn các mục li ở vị trí lẻ.
/* Tạo kiểu cho các hàng chẵn trong bảng */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

Các lớp giả hữu ích khác: :not(), :empty

  • :not(selector): Lớp giả phủ định, cho phép bạn chọn tất cả các phần tử không khớp với selector bên trong. Cách này giúp loại trừ một số trường hợp đặc biệt.
  • :empty: Chọn các phần tử không có con (kể cả text).
/* Chọn tất cả các input không phải là input bị vô hiệu hóa */
input:not([disabled]) {
  border: 1px solid green;
}
Nhóm 3: Pseudo-class Selectors - Định kiểu dựa trên trạng thái
Nhóm 3: Pseudo-class Selectors – Định kiểu dựa trên trạng thái

Nhóm 4: Pseudo-element Selectors

Khác với pseudo-class chọn cả phần tử, pseudo-element chọn và tạo kiểu cho một phần của phần tử. Cú pháp chuẩn của chúng sử dụng hai dấu hai chấm (::).

Tạo kiểu cho dòng đầu tiên và chữ cái đầu tiên: ::first-line & ::first-letter

Đây là hai pseudo-element rất hay được dùng trong thiết kế typography để tạo điểm nhấn cho nội dung văn bản.

  • ::first-line – Áp dụng style cho dòng đầu tiên của một khối văn bản.
  • ::first-letter – Áp dụng style cho ký tự đầu tiên của một khối văn bản. Thường dùng để tạo hiệu ứng drop cap.
p::first-letter {
  font-size: 200%;
  color: #8A2BE2;
  float: left;
  margin-right: 5px;
}

p::first-line {
  font-weight: bold;
}

Thêm nội dung trước và sau phần tử: ::before & ::after

::before và ::after là hai pseudo-element cực kỳ mạnh mẽ. Chúng cho phép bạn chèn nội dung vào trước hoặc sau nội dung thực tế của một phần tử. Nội dung này được tạo ra bởi CSS và không tồn tại trong HTML. Chúng luôn được dùng kèm với thuộc tính content.

/* Thêm dấu ngoặc kép trang trí cho các thẻ blockquote */
blockquote::before {
  content: '“';
  font-size: 3em;
  color: #ccc;
}

blockquote::after {
  content: '”';
  font-size: 3em;
  color: #ccc;
}

Cách này rất hữu ích để thêm các icon, dấu phân cách hoặc các yếu tố trang trí khác mà không làm ảnh hưởng đến cấu trúc HTML.

Nhóm 4: Pseudo-element Selectors - Tạo kiểu cho một phần của phần tử
Nhóm 4: Pseudo-element Selectors – Tạo kiểu cho một phần của phần tử

Nhóm 5: Attribute Selectors

Các css attribute selectors mang lại khả năng chọn lọc rất chi tiết. Bạn có thể chọn các phần tử HTML dựa trên các thuộc tính và giá trị của chúng. Cú pháp của chúng được đặt trong cặp ngoặc vuông [].

Chọn theo sự tồn tại của thuộc tính [attribute]

Cách đơn giản nhất là chọn tất cả các phần tử có một thuộc tính cụ thể, bất kể giá trị của nó là gì.

/* Chọn tất cả các thẻ <a> có thuộc tính target */
a[target] {
  background-color: yellow;
}

Chọn theo giá trị chính xác [attribute=”value”]

Bạn có thể chỉ định một giá trị chính xác cho thuộc tính để việc lựa chọn trở nên cụ thể hơn.

/* Chọn các thẻ <a> mở trong tab mới */
a[target="_blank"] {
  font-style: italic;
}

Các bộ chọn thuộc tính nâng cao: ~=, |=, ^=, $=, *=

Đây là nơi sức mạnh của bộ chọn thuộc tính thực sự tỏa sáng. Chúng cho phép bạn khớp các giá trị thuộc tính một cách linh hoạt.

  • [att~="val"] – Chọn các phần tử có thuộc tính att chứa một từ val (được phân tách bởi khoảng trắng).
  • [att|="val"] – Chọn các phần tử có thuộc tính att bắt đầu bằng val (có thể là chính nó hoặc theo sau là dấu gạch nối).
  • [att^="val"] – Chọn các phần tử có thuộc tính att bắt đầu bằng val.
  • [att$="val"] – Chọn các phần tử có thuộc tính att kết thúc bằng val.
  • [att*="val"] – Chọn các phần tử có thuộc tính att chứa chuỗi val ở bất kỳ vị trí nào.

Ví dụ thực tế: Tạo kiểu cho các liên kết đến file PDF.

/* Thêm icon PDF cho các link kết thúc bằng .pdf */
a[href$="pdf"]::after {
  content: ' (PDF)';
  font-size: 0.8em;
  color: red;
}
Nhóm 5: Attribute Selectors - Sức mạnh của việc chọn theo thuộc tính
Nhóm 5: Attribute Selectors – Sức mạnh của việc chọn theo thuộc tính

Bảng tra cứu nhanh CSS Selectors

Để giúp bạn dễ dàng tham khảo, Da I Kin đã tổng hợp một bảng tra cứu nhanh (css selectors cheat sheet) các selector phổ biến nhất. Hãy lưu lại trang này để sử dụng khi cần nhé!

Selector Ý nghĩa Ví dụ
* Chọn tất cả các phần tử * { margin: 0; }
p Chọn tất cả phần tử <p> p { line-height: 1.5; }
#id Chọn phần tử có ID là id #header { background: #fff; }
.class Chọn các phần tử có class là class .btn { padding: 10px; }
h1, h2 Chọn tất cả phần tử <h1> và <h2> h1, h2 { color: #333; }
div p Chọn mọi <p> nằm bên trong <div> div p { font-size: 16px; }
div > p Chọn mọi <p> là con trực tiếp của <div> article > p { margin-bottom: 1em; }
h1 + p Chọn <p> đầu tiên ngay sau <h1> h1 + p { font-style: italic; }
h1 ~ p Chọn mọi <p> theo sau <h1> h2 ~ p { border-top: 1px solid; }
:hover Chọn phần tử khi di chuột qua a:hover { color: red; }
:nth-child(n) Chọn phần tử con thứ n li:nth-child(2) { color: blue; }
::before Thêm nội dung vào trước phần tử p::before { content: '→ '; }
[target] Chọn phần tử có thuộc tính target a[target] { font-weight: bold; }
[href$="pdf"] Chọn phần tử có href kết thúc bằng pdf a[href$="pdf"] { color: red; }

Độ ưu tiên của CSS Selector (Specificity)

Bạn đã bao giờ viết một đoạn CSS nhưng nó không hoạt động chưa? Rất có thể đó là do xung đột về độ ưu tiên. Đây là một khái niệm quan trọng mà bất kỳ ai làm việc với CSS cũng cần phải hiểu.

Specificity là gì và tại sao nó quan trọng?

CSS Selector Specificity (độ ưu tiên) là một hệ thống quy tắc mà trình duyệt sử dụng để quyết định style nào sẽ được áp dụng cho một phần tử khi có nhiều quy tắc CSS cùng nhắm đến nó. Quy tắc có độ ưu tiên cao hơn sẽ thắng và được áp dụng.

Việc hiểu rõ độ ưu tiên giúp bạn:

  • Tránh các xung đột không đáng có.
  • Viết code CSS dễ dự đoán và dễ bảo trì hơn.
  • Biết cách ghi đè các style có sẵn một cách chính xác.

Cách tính điểm độ ưu tiên để tránh xung đột CSS

Trình duyệt tính điểm cho mỗi selector dựa trên một hệ thống phân cấp. Selector nào có điểm cao hơn sẽ thắng. Dưới đây là thứ tự ưu tiên từ cao đến thấp:

  1. Inline styles (Style nội tuyến): style="..." – Có độ ưu tiên cao nhất.
  2. ID Selectors: #example – Độ ưu tiên cao thứ hai.
  3. Class selectors, Attribute selectors, Pseudo-classes: .example, [href], :hover – Cùng một mức độ ưu tiên.
  4. Element selectors, Pseudo-elements: div, ::before – Độ ưu tiên thấp nhất.

Bộ chọn universal (*) và các combinator (>, +, ~) không có giá trị độ ưu tiên.

Một cách tính điểm đơn giản:

  • ID: 100 điểm
  • Class/Attribute/Pseudo-class: 10 điểm
  • Element/Pseudo-element: 1 điểm

Ví dụ:

  • #main-nav li.active a sẽ có điểm là: 100 (ID) + 1 (Element) + 10 (Class) + 1 (Element) = 112 điểm.
  • div.nav a sẽ có điểm là: 1 (Element) + 10 (Class) + 1 (Element) = 12 điểm.

Quy tắc có 112 điểm sẽ thắng.

Độ ưu tiên của CSS Selector (Specificity)
Độ ưu tiên của CSS Selector (Specificity)

Lời kết

Vậy là chúng ta đã cùng nhau đi qua một hành trình chi tiết về CSS selector. Hiểu và sử dụng thành thạo các bộ chọn này chính là nền tảng vững chắc để bạn xây dựng nên những trang web đẹp và chuyên nghiệp.

Tóm tắt các điểm chính cần nhớ

  • Bắt đầu với các selector đơn giản (tên thẻ, class, ID) cho các tác vụ hàng ngày.
  • Sử dụng combinator khi cần chọn phần tử dựa trên mối quan hệ cấu trúc.
  • Tận dụng pseudo-class để tạo ra các hiệu ứng tương tác và định kiểu dựa trên trạng thái.
  • Dùng attribute selector khi bạn cần chọn lọc phần tử một cách chi tiết dựa trên thuộc tính của chúng.
  • Luôn để ý đến độ ưu tiên (specificity) để tránh các xung đột khó hiểu.

Cách tốt nhất để thành thạo CSS selector là thực hành. Hãy thử áp dụng chúng vào các dự án nhỏ, tự mình tạo ra các hiệu ứng khác nhau. Đừng ngại thử nghiệm và mắc lỗi, đó là cách học nhanh nhất.

Bạn thấy loại selector nào hữu ích nhất cho dự án của mình? Hãy chia sẻ trong phần bình luận bên dưới nhé!

Nếu bạn đang tìm kiếm một đơn vị thiết kế website chuyên nghiệp, đừng ngần ngại liên hệ với Da I Kin. Chúng tôi luôn sẵn sàng đồng hành cùng bạn.

Leave a Reply

Your email address will not be published. Required fields are marked *