Bộ chọn lớp giả :lang() trong CSS được dùng để chọn các phần tử có thuộc tính lang được chỉ định. Điều này giúp chúng ta nhắm mục tiêu một ngôn ngữ cụ thể liên quan đến nội dung và tạo kiểu cho chúng tương ứng.
Cú pháp
Cú pháp như sau:
:lang(){ /*khai báo*/ }
Ví dụ cho bộ chọn lớp giả CSS :lang():
Ví dụ
<!DOCTYPE html> <html> <head> <style> p:lang(it)::after { padding: 20px; content: '~ Italian'; font-style: italic; } p:lang(es)::after { padding: 8px; content: '~ Spanish'; font-style: italic; } p:lang(en)::after { padding: 20px; content: '~ English'; font-style: italic; } </style> </head> <body> <p lang='it'>Bella ciao</p> <p lang='en'>Nice hello</p> <p lang='es'>Bueno adios</p> </body> </html>
Kết quả
Ví dụ khác cho bộ chọn lớp giả CSS :lang():
Ví dụ
<!DOCTYPE html> <html> <head> <style> div{ margin: 10px; padding: 10px; text-align: center; border: 1px solid black; } div:lang(it)::after { padding: 20px; content: '~ Italy'; font-style: italic; } div:lang(es)::after { padding: 8px; content: '~ Spain'; font-style: italic; } div:lang(nl)::after { padding: 20px; content: '~ Belgium'; font-style: italic; } div:lang(es){ background-image: linear-gradient(red 25%, yellow 25%, yellow 75%, red 75%); } div:lang(it){ background-image:linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%); } div:lang(nl){ background-image:linear-gradient(90deg, black 33.3%, yellow 33.3%, yellow 66.6%, red 66.6%); } </style> </head> <body> <div lang='it'>Rome</div> <div lang='nl'>Brussels</div> <div lang='es'>Madrid</div> </body> </html>
Kết quả
