เลือกอิลิเมนต์ที่ lang เริ่มต้นด้วย en ด้วย CSS

ใช้ Selector [attribute|="value"] เพื่อเลือกอิลิเมนต์ที่มีแอตทริบิวต์ขึ้นต้นด้วยค่าที่ระบุ

ตัวอย่างโค้ด

ลองรันโค้ดด้านล่างเพื่อทดสอบ CSS [attribute|="value"] Selector:

<!DOCTYPE html>
<html>
<head>
  <style>
    [lang|="en"] {
      border: 5px solid orange;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <p lang="en">Hello</p>
  <p lang="no">Hei</p>
</body>
</html>

ผลลัพธ์: ย่อหน้าแรก lang="en" จะมีขอบสีส้ม เพราะตรงกับ "en" ย่อหน้าที่สอง lang="no" ไม่ตรง เหมาะสำหรับรองรับหลายภาษา เช่น en-US, en-GB จะตรงกับ [lang|="en"] ทั้งคู่