:lang()
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Lớp giả CSS :lang() khớp với các phần tử dựa trên ngôn ngữ được xác định cho chúng.
Try it
*:lang(en-US) {
outline: 2px solid deeppink;
}
<p lang="vi">
Music during road trips and long commutes aren't a problem, but using
headphones isn't the best thing to do while driving in your car.
</p>
<p lang="pl-PL">
Gdy widzimy znak z narysowaną czaszką i napisem
<strong lang="vi">DANGER</strong> to lepiej nie wchodzić do środka.
</p>
Cú pháp
:lang(<language-code> [,<language-code> ]*) {
/* ... */
}
Tham số
<language-code>-
Danh sách phân cách bằng dấu phẩy gồm một hoặc nhiều
<string>nhắm đến các phần tử dựa trên các thẻ ngôn ngữ BCP 47 được đặt trong thuộc tínhlangcủa chúng. Khớp theo phạm vi ngôn ngữ không phân biệt chữ hoa/thường.
Mô tả
Khi chọn ngôn ngữ, có khớp wildcard ngầm định, vì vậy :lang(de-DE) sẽ khớp với de-DE, de-DE-1996, de-Latn-DE, de-Latf-DE và de-Latn-DE-1996.
Khi dùng wildcard tường minh phải bao gồm khớp đầy đủ của một subtag ngôn ngữ, vì vậy :lang("*-F*") không hợp lệ nhưng :lang("*-Fr") thì hợp lệ.
Ví dụ
Khớp các phần tử con của một ngôn ngữ nhất định
Trong ví dụ này, lớp giả :lang() được dùng để khớp với phần tử cha của các phần tử trích dẫn (<q>) dùng bộ kết hợp con. Lưu ý rằng đây không phải cách duy nhất để làm điều này, và phương pháp tốt nhất phụ thuộc vào loại tài liệu. Cũng lưu ý rằng các giá trị Unicode được dùng để chỉ định một số ký tự trích dẫn đặc biệt.
HTML
<div lang="vi">
<q>This English quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="fr">
<q>This French quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="de">
<q>This German quote has a <q>nested</q> quote inside.</q>
</div>
CSS
:lang(en) > q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
quotes: "« " " »";
}
:lang(de) > q {
quotes: "»" "«" "\2039" "\203A";
}
Kết quả
Khớp nhiều ngôn ngữ
Ví dụ sau đây minh họa cách khớp nhiều ngôn ngữ bằng cách cung cấp danh sách mã ngôn ngữ phân cách bằng dấu phẩy. Cũng có thể dùng wildcard để khớp các ngôn ngữ trong một phạm vi ngôn ngữ nhất định.
CSS
/* Matches nl and de */
:lang("nl", "de") {
color: green;
}
/* Omitting quotes & case-insensitive matching */
:lang(EN, FR) {
color: blue;
}
/* Wildcard matching a language range */
:lang("*-Latn") {
color: red;
}
HTML
<p lang="nl">Dit is een Nederlandse paragraaf.</p>
<p lang="de">Dies ist ein deutscher Satz.</p>
<p lang="vi">This is an English sentence.</p>
<p lang="en-GB">Matching the language range of English.</p>
<p lang="fr">Ceci est un paragraphe français.</p>
<p lang="fr-Latn-FR">Ceci est un paragraphe français en latin.</p>
Kết quả
Đặc tả
| Specification |
|---|
| Selectors Level 4 # lang-pseudo |
Tương thích trình duyệt
Xem thêm
- Lớp giả
:dirkhớp theo hướng văn bản - Thuộc tính HTML
lang - Thuộc tính HTML
translate - BCP 47 language tag