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
* {}
Đoạn mã trên sử dụng loại bộ chọn đơn giản nào?
div {}
Đoạn mã trên sử dụng loại bộ chọn đơn giản nào?
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ả
Bộ chọn phần tử giả sử dụng bao nhiêu dấu hai chấm?
p:hover { background: white; color: black; }
Đoạn mã trên sử dụng loại bộ chọn giả nào?
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
Ký hiệu nào sau đây không phải là bộ kết hợp bộ chọn?
section.awesome { border: 1px solid hotpink; }
Bộ chọn ở trên là một ví dụ về...