Trình chọn (Selector)

Podcast CSS – 002: Bộ chọn

Nếu có một số văn bản mà bạn chỉ muốn phóng to và hiển thị màu đỏ nếu đó là đoạn đầu tiên của một bài viết, bạn sẽ làm điều đó bằng cách nào?

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

Bạn sử dụng bộ chọn CSS để tìm phần tử cụ thể đó và áp dụng quy tắc CSS, như thế này.

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

CSS cung cấp cho bạn nhiều tuỳ chọn để chọn phần tử và áp dụng quy tắc cho các phần tử đó, từ rất đơn giản đến rất phức tạp, để giúp giải quyết các tình huống như thế này.

Các phần trong quy tắc CSS

Để hiểu cách hoạt động và vai trò của bộ chọn trong CSS, bạn cần biết các phần trong quy tắc CSS. Quy tắc CSS là một khối mã, chứa một hoặc nhiều bộ chọn và một hoặc nhiều nội dung khai báo.

Trong quy tắc CSS này, bộ chọn là .my-css-rule, sẽ tìm tất cả phần tử có lớp my-css-rule trên trang. Có ba khai báo trong dấu ngoặc nhọn. Phần khai báo là một cặp thuộc tính và giá trị áp dụng kiểu cho các phần tử do bộ chọn khớp. Một quy tắc CSS có thể có bao nhiêu nội dung khai báo và bộ chọn tuỳ thích.

Bộ chọn đơn giản

Nhóm bộ chọn đơn giản nhất nhắm đến các phần tử HTML cùng với lớp, mã nhận dạng và các thuộc tính khác có thể được thêm vào thẻ HTML.

Bộ chọn chung

Bộ chọn chung (còn gọi là ký tự đại diện) khớp với mọi phần tử.

* {
  color: hotpink;
}

Quy tắc này làm cho mọi phần tử HTML trên trang có văn bản màu hồng đậm.

Bộ chọn loại

Bộ chọn loại khớp trực tiếp với phần tử HTML.

section {
  padding: 2em;
}

Quy tắc này khiến mọi phần tử <section> có 2em là padding ở mọi bên.

Bộ chọn lớp

Một phần tử HTML có thể chứa một hoặc nhiều mục được xác định trong thuộc tính class của phần tử đó. Bộ chọn lớp khớp với mọi phần tử áp dụng lớp đó.

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

Mọi phần tử áp dụng lớp đều có màu đỏ:

.my-class {
  color: red;
}

Lưu ý rằng . chỉ xuất hiện trong CSS chứ không xuất hiện trong HTML. Điều này là do ký tự . hướng dẫn ngôn ngữ CSS để khớp với các thành viên của thuộc tính lớp. Đây là một mẫu phổ biến trong CSS, trong đó một ký tự đặc biệt hoặc tập hợp ký tự, được dùng để xác định các loại bộ chọn.

Một phần tử HTML có lớp .my-class sẽ vẫn được so khớp với quy tắc CSS ở trên, ngay cả khi chúng có một số lớp khác, như sau:

<div class="my-class another-class some-other-class"></div>

Điều này là do CSS tìm kiếm một thuộc tính class chứa lớp đã xác định, thay vì so khớp chính xác lớp đó.

Bộ chọn mã

Phần tử HTML có thuộc tính id nên là phần tử duy nhất trên trang có giá trị mã nhận dạng đó. Bạn cần chọn các phần tử có bộ chọn mã nhận dạng như sau:

#rad {
  border: 1px solid blue;
}

CSS này sẽ áp dụng đường viền màu xanh lam cho phần tử HTML có id là rad, như sau:

<div id="rad"></div>

Tương tự như bộ chọn lớp ., hãy sử dụng ký tự # để hướng dẫn CSS tìm một phần tử khớp với id theo sau.

Bộ chọn thuộc tính

Bạn có thể tìm các phần tử có một thuộc tính HTML nhất định hoặc có một giá trị nhất định đối với một thuộc tính HTML, bằng cách sử dụng bộ chọn thuộc tính. Hướng dẫn CSS tìm các thuộc tính bằng cách gói bộ chọn bằng dấu ngoặc vuông ([ ]).

[data-type='primary'] {
  color: red;
}

CSS này tìm tất cả các phần tử có thuộc tính data-type có giá trị primary, như sau:

<div data-type="primary"></div>

Thay vì tìm một giá trị cụ thể của data-type, bạn cũng có thể tìm các phần tử có thuộc tính này, bất kể giá trị của thuộc tính đó.

[data-type] {
  color: red;
}

<div data-type="primary"></div>
<div data-type="secondary"></div>

Cả hai phần tử <div> này đều sẽ có văn bản màu đỏ.

Bạn có thể sử dụng các bộ chọn thuộc tính phân biệt chữ hoa chữ thường bằng cách thêm toán tử s vào bộ chọn thuộc tính.

[data-type='primary' s] {
  color: red;
}

Điều này có nghĩa là nếu một phần tử HTML có data-type là Primary thay vì primary, thì phần tử đó sẽ không nhận được văn bản màu đỏ. Bạn có thể làm điều ngược lại – không phân biệt chữ hoa chữ thường – bằng cách sử dụng toán tử i.

Cùng với các toán tử viết hoa chữ thường, bạn có thể dùng các toán tử khớp với các phần của chuỗi bên trong các giá trị thuộc tính.

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}

Bộ chọn nhóm

Bộ chọn không nhất thiết phải chỉ khớp với một phần tử duy nhất. Bạn có thể nhóm nhiều bộ chọn bằng cách phân tách các bộ chọn bằng dấu phẩy:

strong,
em,
.my-class,
[lang] {
  color: red;
}

Ví dụ này mở rộng việc thay đổi màu sắc cho cả phần tử <strong> và phần tử <em>. Lớp này cũng được mở rộng cho một lớp có tên là .my-class và một phần tử có thuộc tính lang.

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về các bộ chọn đơn giản

* {}

div {}

Lớp giả và phần tử giả

CSS cung cấp các loại bộ chọn hữu ích tập trung vào trạng thái cụ thể của nền tảng, chẳng hạn như khi di chuột qua một phần tử, cấu trúc bên trong một phần tử hoặc các phần của một phần tử.

Lớp-giả

Các phần tử HTML có nhiều trạng thái, do được tương tác hoặc một trong các phần tử con đang ở một trạng thái nhất định.

Ví dụ: người dùng có thể di chuột qua một phần tử HTML hoặc di chuột qua một phần tử con. Trong những trường hợp đó, hãy sử dụng lớp giả lập :hover.

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

Hãy tìm hiểu thêm trong mô-đun lớp giả.

Yếu tố giả

Phần tử giả khác với lớp giả vì chúng hoạt động như thể chúng đang chèn một phần tử mới bằng CSS chứ không phản hồi trạng thái của nền tảng. Các thành phần giả cũng có cú pháp khác với các lớp giả lập, vì thay vì sử dụng một dấu hai chấm (:), chúng ta sẽ dùng dấu hai chấm đôi (::).

.my-element::before {
  content: 'Prefix - ';
}

Như trong bản minh hoạ ở trên, bạn đã thêm loại tệp vào nhãn của đường liên kết, bạn có thể sử dụng phần tử giả ::before để chèn nội dung ở đầu một phần tử hoặc sử dụng phần tử giả ::after để chèn nội dung ở cuối một phần tử.

Tuy nhiên, các yếu tố giả không bị giới hạn ở việc chèn nội dung. Bạn cũng có thể dùng chúng để nhắm đến các phần cụ thể của một phần tử. Ví dụ: giả sử bạn có một danh sách. Sử dụng ::marker để tạo kiểu cho từng dấu đầu dòng (hoặc số) trong danh sách

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

Bạn cũng có thể sử dụng ::selection để tạo kiểu cho nội dung mà người dùng đã làm nổi bật.

::selection {
  background: black;
  color: white;
}

Hãy tìm hiểu thêm trong mô-đun về phần tử giả.

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về bộ chọn giả

p:hover {
  background: white;
  color: black;
}

Bộ chọn phức tạp

Bạn đã thấy một loạt bộ chọn rộng lớn, nhưng đôi khi, bạn sẽ cần kiểm soát chi tiết hơn bằng CSS của mình. Đây là nơi các bộ chọn phức tạp sẽ xuất hiện để hỗ trợ bạn.

Điều đáng nhớ tại thời điểm này là mặc dù các bộ chọn sau đây cung cấp cho chúng ta nhiều năng lượng hơn, nhưng chúng ta chỉ có thể chuyển xuống dưới bằng cách chọn các phần tử con. Chúng tôi không thể nhắm mục tiêu theo hướng lên trên và chọn phần tử mẹ. Chúng tôi sẽ giới thiệu về khái niệm tầng và cách thức hoạt động của tầng trong một bài học sau.

Tổ hợp

Tổ hợp là phần nằm giữa 2 bộ chọn. Ví dụ: nếu bộ chọn là p > strong, thì tổ hợp sẽ là ký tự >. Bộ chọn sử dụng những bộ kết hợp này giúp bạn chọn các mục dựa trên vị trí của chúng trong tài liệu.

Tổ hợp con cháu

Để hiểu rõ các trình kết hợp con, trước tiên, bạn cần hiểu rõ các phần tử mẹ và phần tử con.

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

Phần tử mẹ là <p> chứa văn bản. Bên trong phần tử <p> đó là một phần tử <strong>, giúp nội dung của phần tử được in đậm. Vì nằm trong <p> nên đây là một phần tử con.

Trình kết hợp con cháu cho phép chúng ta nhắm đến một phần tử con. Hàm này sử dụng một không gian () để hướng dẫn trình duyệt tìm các phần tử con:

p strong {
  color: blue;
}

Đoạn mã này chọn tất cả các phần tử <strong> là các phần tử con của <p>, khiến các phần tử này có màu xanh dương theo quy tắc đệ quy.

Hiệu ứng này được minh hoạ rõ hơn trong ví dụ trên, sử dụng bộ chọn tổ hợp .top div. Quy tắc CSS đó sẽ thêm khoảng đệm bên trái vào các phần tử <div> đó. Vì trình kết hợp mang tính đệ quy, nên tất cả các phần tử <div> trong .top đều sẽ được áp dụng cùng khoảng đệm đó.

Hãy xem bảng điều khiển HTML trong bản minh hoạ này để thấy cách phần tử .top có nhiều phần tử con <div> và bản thân phần tử này có các phần tử con <div>.

Trình kết hợp đồng cấp tiếp theo

Bạn có thể tìm một phần tử ngay sau một phần tử khác bằng cách sử dụng ký tự + trong bộ chọn.

Để thêm khoảng cách giữa các phần tử xếp chồng, hãy sử dụng trình kết hợp đồng cấp tiếp theo để chỉ thêm không gian nếu một phần tử là đồng cấp tiếp theo của phần tử con của .top.

Bạn có thể thêm lề vào tất cả các phần tử con của .top bằng cách sử dụng bộ chọn sau:

.top * {
  margin-top: 1em;
}

Vấn đề của vấn đề này là vì bạn sẽ chọn mọi phần tử con của .top, nên quy tắc này có thể tạo thêm không gian không cần thiết. Trình kết hợp đồng cấp tiếp theo, được kết hợp với một bộ chọn chung cho phép bạn không chỉ kiểm soát các phần tử có dung lượng, mà còn áp dụng không gian cho bất kỳ phần tử nào. Điều này mang lại cho bạn một số tính linh hoạt về lâu dài, bất kể phần tử HTML nào xuất hiện trong .top.

Tổ hợp đồng cấp tiếp theo

Trình kết hợp tiếp theo rất giống với bộ chọn đồng cấp tiếp theo. Tuy nhiên, thay vì ký tự +, hãy sử dụng ký tự ~. Sự khác biệt này là phần tử chỉ phải tuân theo một phần tử khác có cùng phần tử mẹ, thay vì là phần tử tiếp theo có cùng phần tử mẹ.

Trình kết hợp tiếp theo này cung cấp độ cứng thấp hơn một chút, hữu ích trong các ngữ cảnh như mẫu trên, khi chúng ta thay đổi màu của nút chuyển tuỳ chỉnh khi hộp đánh dấu liên kết có trạng thái :checked.

Trình kết hợp con

Trình kết hợp con (còn gọi là thành phần con trực tiếp) cho phép bạn kiểm soát chặt chẽ hơn trình đệ quy đi kèm với bộ chọn trình kết hợp. Bằng cách sử dụng ký tự >, bạn giới hạn bộ chọn kết hợp để chỉ áp dụng cho phần tử con trực tiếp.

Hãy xem xét ví dụ về bộ chọn đồng cấp trước đó và tiếp theo. Khoảng cách được thêm vào mỗi thành phần đồng cấp tiếp theo, nhưng nếu một trong các thành phần đó cũng có các thành phần phụ tiếp theo là thành phần con, thì điều này có thể dẫn đến khoảng cách thừa và không mong muốn.

Để khắc phục vấn đề này, hãy thay đổi bộ chọn đồng cấp tiếp theo để kết hợp một trình kết hợp con: > * + *. Hiện tại, quy tắc này sẽ chỉ áp dụng cho phần tử con trực tiếp của .top.

Bộ chọn kết hợp

Bạn có thể kết hợp các bộ chọn để tăng tính cụ thể và dễ đọc. Ví dụ: để nhắm đến các phần tử <a> cũng có một lớp .my-class, hãy viết như sau:

a.my-class {
  color: red;
}

Cách này sẽ không áp dụng màu đỏ cho tất cả đường liên kết mà cũng chỉ áp dụng màu đỏ cho .my-class if nó nằm trên phần tử <a>. Để biết thêm thông tin về nội dung này, hãy xem mô-đun về tính cụ thể.

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về các bộ chọn phức tạp

section.awesome {
  border: 1px solid hotpink;
}

Tài nguyên

• Tài liệu tham khảo về bộ chọn CSS
• Trò chơi bộ chọn tương tác
• Tài liệu tham khảo về lớp giả và phần tử giả
• Công cụ giúp chuyển bộ chọn CSS thành nội dung giải thích đơn giản bằng tiếng Anh