CSS :lang() pseudo-class selector ใช้สำหรับเลือกองค์ประกอบที่มีแอตทริบิวต์ lang ระบุไว้ นี่ช่วยให้เราเป้าหมายภาษาเฉพาะที่เกี่ยวข้องกับเนื้อหาและจัดรูปแบบตามนั้น
ไวยากรณ์
ไวยากรณ์ดังนี้:
:lang(){ /*declarations*/ }
ลองดูตัวอย่างสำหรับ CSS :lang() pseudo-class selector:
ตัวอย่าง
<!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>
ผลลัพธ์
ลองดูอีกตัวอย่างของ CSS :lang() pseudo-class selector:
ตัวอย่างเพิ่มเติม
<!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>
ผลลัพธ์
