Bộ Chọn Trong CSS3

Bộ chọn trong CSS3

Table of Contents

Toggle

• Bộ chọn trong CSS3
  • Bộ chọn là gì?
  • Bộ chọn phổ quát
  • Bộ chọn phần tử
  • Bộ chọn Id
  • Bộ chọn lớp
  • Bộ chọn con cháu
  • Bộ chọn con
  • Bộ chọn anh chị em liền kề
  • Bộ chọn anh chị em
  • Gom nhóm bộ chọn

Trong hướng dẫn này, bạn sẽ học cách sử dụng các bộ chọn CSS3 để áp dụng các quy tắc CSS cho các phần tử HTML.

Bộ chọn là gì?

Bộ chọn CSS (selector) là một mẫu để khớp các phần tử trên trang web. Các quy tắc CSS được liên kết với bộ chọn đó sẽ được áp dụng cho các phần tử phù hợp với bộ chọn.

Bộ chọn là một trong những khía cạnh quan trọng nhất của CSS vì chúng cho phép bạn nhắm mục tiêu các phần tử cụ thể trên trang web của mình theo nhiều cách khác nhau để chúng có thể được định dạng.

Dưới đây là các loại bộ chọn có sẵn trong CSS3, chúng ta hãy xem xét kỹ hơn chúng.

Bộ chọn phổ quát

Bộ chọn phổ quát, được biểu thị bằng dấu hoa thị (*), khớp với mọi phần tử trên trang.

Bộ chọn phổ quát có thể bị bỏ qua nếu các điều kiện khác tồn tại trên phần tử. Bộ chọn này thường được sử dụng để loại bỏ lề và đệm mặc định khỏi các phần tử nhằm mục đích kiểm tra nhanh.

Hãy thử ví dụ sau để hiểu về cơ bản nó hoạt động như thế nào:

* { margin: 0; padding: 0; }

Các quy tắc CSS bên trong bộ chọn * sẽ được áp dụng cho mọi phần tử trong tài liệu HTML.

Lưu ý: Không nên sử dụng bộ chọn phổ quát (*) quá thường xuyên trong môi trường sản xuất, vì bộ chọn này khớp với mọi phần tử trên trang web gây áp lực không cần thiết lên trình duyệt. Sử dụng bộ chọn phần tử hoặc bộ chọn lớp để thay thế.

Bộ chọn phần tử

Bộ chọn phần tử khớp với tất cả các phần tử trong tài liệu HTML với tên phần tử tương ứng. Hãy thử một ví dụ để xem nó thực sự hoạt động như thế nào:

p { color: blue; }

Các quy tắc CSS bên trong bộ chọn p sẽ được áp dụng trên mọi phần tử <p> (hoặc đoạn văn) trong tài liệu và tô màu xanh lam cho nó, bất kể vị trí của chúng trong cây tài liệu.

Bộ chọn Id

Bộ chọn Id được sử dụng để xác định các quy tắc kiểu cho một phần tử đơn lẻ hoặc duy nhất.

Bộ chọn id được xác định bắt đầu bằng dấu thăng (#) ngay sau đó là giá trị id.

#error { color: red; }

Quy tắc CSS này hiển thị văn bản của một phần tử có thuộc tính id là error có màu đỏ.

Lưu ý: Giá trị của thuộc tính id phải là duy nhất trong một tài liệu nhất định – nghĩa là không có hai phần tử nào trong tài liệu HTML của bạn có thể chia sẻ cùng một giá trị id.

Bộ chọn lớp

Bộ chọn lớp có thể được sử dụng để chọn bất kỳ phần tử HTML nào có thuộc tính class. Tất cả các phần tử có lớp đó sẽ được định dạng theo quy tắc đã xác định.

Bộ chọn lớp được định nghĩa bắt đầu bằng dấu chấm (.) ngay sau đó là tên lớp.

.blue { color: blue; }

Quy tắc CSS trên làm cho văn bản có màu xanh lam của mọi phần tử trong tài liệu có thuộc tính class là blue. Bạn có thể làm cho nó cụ thể hơn một chút. Ví dụ:

p.blue { color: blue; }

Quy tắc CSS bên trong bộ chọn p.blue chỉ hiển thị văn bản bằng màu xanh lam cho những phần tử <p> có thuộc tính class là blue và không ảnh hưởng đến các đoạn văn bản khác.

Bộ chọn con cháu

Bạn có thể sử dụng các bộ chọn này (descendant selector) khi bạn cần chọn một phần tử là con cháu của một phần tử khác, ví dụ: nếu bạn muốn chỉ nhắm mục tiêu những phần tử <a> nằm trong danh sách không có thứ tự, thay vì nhắm mục tiêu tất cả các phần tử <a>. Hãy xem nó hoạt động như thế nào:

ul.menu li a { text-decoration: none; } h1 em { color: green; }

Quy tắc CSS bên trong bộ chọn ul.menu li a chỉ áp dụng cho những phần tử <a> chứa bên trong phần tử <ul> có lớp .menu và không ảnh hưởng đến các phần tử <a> khác bên trong tài liệu.

Tương tự, các quy tắc kiểu bên trong bộ chọn h1 em sẽ chỉ được áp dụng cho những phần tử <em> chứa bên trong phần tử <h1> và không ảnh hưởng đến các phần tử <em> khác .

Bộ chọn con

Một bộ chọn con (child selector) được sử dụng để chỉ chọn những phần tử là con trực tiếp của một phần tử nào đó.

Một bộ chọn con được tạo thành từ hai hoặc nhiều bộ chọn được phân tách bằng một ký hiệu lớn hơn (>). Ví dụ: bạn có thể sử dụng bộ chọn này để chọn cấp đầu tiên của các phần tử danh sách bên trong danh sách lồng nhau có nhiều hơn một cấp. Hãy xem một ví dụ để hiểu cách nó hoạt động:

ul > li { list-style: square; } ul > li ol { list-style: none; }

Quy tắc kiểu bên trong bộ chọn ul > li chỉ áp dụng cho những phần tử <li> là con trực tiếp của các phần tử <ul> và không ảnh hưởng đến các phần tử danh sách khác.

Bộ chọn anh chị em liền kề

Các bộ chọn anh chị em liền kề (adjacent sibling selector) có thể được sử dụng để chọn các phần tử anh chị em (nghĩa là các phần tử ở cùng cấp). Bộ chọn này có cú pháp như: E1 + E2, trong đó E2 là đích của bộ chọn.

Bộ chọn h1 + p trong ví dụ sau sẽ chỉ chọn các phần tử <p> nếu cả phần tử <h1> và phần tử <p> đều có chung gốc trong cây tài liệu và phần tử <h1> ngay trước phần tử <p>. Điều đó có nghĩa là chỉ những đoạn văn xuất hiện ngay sau mỗi phần tử <h1> mới được áp dụng các quy tắc CSS này. Hãy xem bộ chọn này thực sự hoạt động như thế nào:

h1 + p { color: blue; font-size: 18px; } ul.task + p { color: #f0f; text-indent: 30px; }

Bộ chọn anh chị em

Bộ chọn anh chị em tương tự như bộ chọn anh chị em liền kề (E1 + E2), nhưng nó ít nghiêm ngặt hơn. Một bộ chọn anh chị em được tạo thành từ hai bộ chọn đơn giản được phân tách bằng ký tự dấu ngã (∼). Nó có thể được viết như sau: E1 ∼ E2, trong đó E2 là đích của bộ chọn.

Bộ chọn h1 ∼ p trong ví dụ bên dưới sẽ chọn tất cả các phần tử <p> có phần tử <h1> đứng trước, trong đó tất cả các phần tử <h1> và <p> có chung một gốc trong cây tài liệu.

h1 ∼ p { color: blue; font-size: 18px; } ul.task ∼ p { color: #f0f; text-indent: 30px; }

Các bộ chọn phức tạp hơn như bộ chọn thuộc tính, pseudo-class, pseudo-element. Chúng ta sẽ thảo luận chi tiết về các bộ chọn này trong các chương sắp tới.

Gom nhóm bộ chọn

Thông thường, một số bộ chọn trong một stylesheet CSS chia sẻ các khai báo quy tắc CSS giống nhau. Bạn có thể nhóm chúng thành một danh sách được phân tách bằng dấu phẩy để thu nhỏ mã trong stylesheet CSS của mình. Nó cũng ngăn bạn lặp đi lặp lại các quy tắc CSS giống nhau. Hãy cùng xem:

h1 { font-size: 36px; font-weight: normal; } h2 { font-size: 28px; font-weight: normal; } h3 { font-size: 22px; font-weight: normal; }

Như bạn có thể thấy trong ví dụ trên, quy tắc CSS font-weight: normal; được chia sẻ bởi các bộ chọn h1, h2 và h3. Vì vậy nó có thể được nhóm trong một danh sách bằng dấu phẩy, như thế này:

h1, h2, h3 { font-weight: normal; } h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 22px; }