Trình chọn (Selector)

Podcast CSS - 002: Bộ chọn

Nếu bạn có một số văn bản mà bạn chỉ muốn lớn hơn và có màu đỏ nếu đó là đoạn đầu tiên của bài viết, làm thế nào để làm được việc đó?

<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ư sau.

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 những tình huống như thế này.

Các phần của quy tắc CSS

Để tìm hiểu cách hoạt động và vai trò của bộ chọn trong CSS, điều quan trọng là phải biết các phần của 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 tìm tất cả các phần tử có lớp my-css-rule trên trang. Có 3 nội dung 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ử khớp với bộ chọn. Một quy tắc CSS có thể có bao nhiêu 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 mục tiêu đến các phần tử HTML cộng lớp, mã nhận dạng và các thuộc tính khác mà bạn có thể 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 khiến mọi phần tử HTML trên trang đều có văn bản hotpink.

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 padding ở mọi phía.

Bộ chọn lớp

Một phần tử HTML có thể có một hoặc nhiều mục được xác định trong thuộc tính class của chúng. Chiến lược phát hành đĩa đơn bộ chọn lớp khớp với bất kỳ phần tử nào được áp dụng lớp đó.

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

Bất kỳ phần tử nào được áp dụng lớp đó đều sẽ có màu đỏ:

.my-class {
  color: red;
}

Hãy lưu ý cách . chỉ có trong CSS chứ không có 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 phần thuộc tính của 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ự, dùng để xác định loại bộ chọn.

Một phần tử HTML có lớp .my-class vẫn sẽ đượ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 thuộc tính class chứa lớp đã xác định, thay vì khớp chính xác với lớp đó.

Bộ chọn mã nhận dạng

Phần tử HTML có thuộc tính id phải là phần tử duy nhất trên trang có giá trị mã nhận dạng đó. Bạ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 dương cho phần tử HTML có id là rad, như sau:

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

Tương tự như bộ chọn lớp ., 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 kiế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 cho 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 trong 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 với 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 hiện có, bất kể giá trị của thuộc tính đó là gì.

[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 có 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, nó sẽ không nhận được văn bản màu đỏ. Bạn có thể làm 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, bạn có quyền truy cập vào các toán tử khớp với các phần của chuỗi bên trong 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 khớp chỉ với một phần tử. Bạn có thể nhóm nhiều bộ chọn bằng cách dùng dấu phẩy để phân tách các bộ chọn đó:

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

Ví dụ này mở rộng thay đổi về màu sắc cho cả phần tử <strong> và phần tử <em>. Phần tử 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 kiến thức

Kiểm tra kiến thức của bạn về 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 nền tảng cụ thể, chẳng hạn như khi một phần tử được di chuột, cấu trúc bên trong 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 tự phát triển ở nhiều trạng thái, do họ đã tương tác với hoặc một trong các phần tử con của chúng đang ở trạng thái nhất định.

Ví dụ: người dùng có thể di chuột một phần tử HTML bằng con trỏ chuột hoặc phần tử con mà người dùng cũng có thể di chuột. Trong những trường hợp đó, hãy sử dụng lớp giả :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;
}

Tìm hiểu thêm trong mô-đun lớp giả.

Nguyên tố giả

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

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

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

Tuy nhiên, phần tử giả không chỉ giới hạn ở việc chèn nội dung. Bạn cũng có thể sử dụng thứ nguyên và chỉ số tùy chỉnh để nhắm mục tiêu 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 đã được người dùng đánh dấu.

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

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

Kiểm tra kiến thức

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 các bộ chọn, nhưng đôi khi, bạn cần kiểm soát chi tiết hơn với CSS của mình. Đây là nơi các bộ chọn phức tạp dùng để hỗ trợ bạn.

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

Máy kết hợp

Bộ kết hợp là lớp nằm giữa hai bộ chọn. Ví dụ: nếu bộ chọn là p > strong, thì bộ kết hợp sẽ là ký tự >. Bộ chọn sử dụng các 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

Để tìm hiểu về các tổ hợp con, trước tiên, bạn cần tìm hiểu 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> có chứa văn bản. Bên trong phần tử <p> đó là một phần tử <strong>, nội dung của phần tử đó sẽ in đậm. Vì nằm bên trong <p> nên đây là phần tử con.

Bộ kết hợp con cho phép chúng ta nhắm mục tiêu đến một phần tử con. Thao tác này sử dụng dấu cách () để 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ả phần tử <strong> chỉ là các phần tử con của các phần tử <p>, làm cho các phần tử này có màu xanh lam theo quy tắc đệ quy.

Hiệu ứng này được minh hoạ rõ hơn trong ví dụ trên. bằng cách sử dụng bộ chọn tổ hợp, .top div. Quy tắc CSS đó thêm khoảng đệm bên trái vào các phần tử <div> đó. Vì bộ kết hợp là đệ quy, tất cả phần tử <div> trong .top 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 để xem cách phần tử .top có một số phần tử con <div>, có <div> phần tử con.

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

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

Cách thêm khoảng cách giữa các thành phần xếp chồng: sử dụng trình kết hợp đồng cấp tiếp theo để thêm không gian chỉ khi một phần tử là phần tử đồ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 đề xảy ra ở đây là do bạn đang chọn mọi phần tử con của .top, quy tắc này có thể tạo ra thêm không gian, không cần thiết. Trình kết hợp đồng cấp tiếp theo, kết hợp với bộ chọn chung cho phép bạn không chỉ kiểm soát việc các phần tử nào sẽ có không gian, nhưng cũng áp dụng dấu cách cho mọi phần tử. Điều này mang lại cho bạn một chút sự linh hoạt về lâu dài, bất kể phần tử HTML nào xuất hiện trong .top.

Bộ kết hợp đồng cấp tiếp theo

Bộ 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ự ~. Điều này khác biệt ở chỗ một phần tử chỉ phải theo sau 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 một phần tử mẹ.

Bộ kết hợp tiếp theo này sẽ bớt cứng hơn một chút, điều này rất hữu ích trong các ngữ cảnh như mẫu trên, nơi 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 với nút chuyển đó có trạng thái :checked.

Bộ kết hợp con

Bộ 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 tốt hơn đối với đệ quy đi kèm với bộ chọn bộ kết hợp. Bằng cách sử dụng ký tự >, bạn giới hạn bộ chọn 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 tiếp theo. Không gian này sẽ được thêm vào mỗi đồng cấp tiếp theo, nhưng nếu một trong các phần tử đó cũng có các phần tử đồng cấp tiếp theo là phần tử con, vì nó có thể tạo ra khoảng cách không mong muốn và dư thừa.

Để khắc phục vấn đề nà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: > * + *. Giờ đây, quy tắc này sẽ chỉ áp dụng cho nhà xuất bản con trực tiếp của .top.

Bộ chọn phức hợp

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

a.my-class {
  color: red;
}

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

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về 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ề phần tử giả và lớp giả
• Một công cụ chuyển các bộ chọn CSS thành nội dung giải thích đơn giản bằng tiếng Anh