:dir()
Baseline
2023
Newly available
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
:dir() là lớp giả trong CSS khớp với các phần tử dựa trên chiều hướng của văn bản chứa trong chúng.
/* Chọn bất kỳ phần tử có văn bản từ phải sang trái */
:dir(rtl) {
background-color: red;
}
Lớp giả :dir() chỉ sử dụng giá trị ngữ nghĩa của chiều hướng, tức là giá trị được định nghĩa trong chính tài liệu. Nó không tính đến chiều hướng kiểu dáng, tức là chiều hướng được đặt bởi các thuộc tính CSS như direction.
Note:
Lưu ý rằng hành vi của lớp giả :dir() không tương đương với bộ chọn thuộc tính [dir=…]. Loại sau khớp với thuộc tính HTML dir, và bỏ qua các phần tử thiếu thuộc tính đó — ngay cả khi chúng kế thừa chiều hướng từ phần tử cha. (Tương tự, [dir=rtl] và [dir=ltr] sẽ không khớp với giá trị auto.) Ngược lại, :dir() sẽ khớp với giá trị được tính toán bởi user agent, kể cả khi được kế thừa.
Note:
Trong HTML, chiều hướng được xác định bởi thuộc tính dir. Các loại tài liệu khác có thể có các phương pháp khác nhau.
Cú pháp
:dir([ltr | rtl]) {
/* ... */
}
Tham số
Lớp giả :dir() yêu cầu một tham số, đại diện cho chiều hướng văn bản bạn muốn nhắm đến.
Ví dụ
HTML
<div dir="rtl">
<span>test1</span>
<div dir="ltr">
test2
<div dir="auto">עִבְרִית</div>
</div>
</div>
CSS
:dir(ltr) {
background-color: yellow;
}
:dir(rtl) {
background-color: powderblue;
}
Kết quả
Đặc tả
| Specification |
|---|
| HTML # selector-ltr |
| HTML # selector-rtl |
| Selectors Level 4 # dir-pseudo |