เลือกทุก <a> ที่ href ลงท้ายด้วย .htm ด้วย CSS

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

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

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

<!DOCTYPE html>
<html>
<head>
  <style>
    [href$="htm"] {
      border: 5px solid orange;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <a href="https://tutorialspoint.com/java/index.htm">Java Tutorial</a>
  <a href="https://www.tutorialspoint.com/java/java_tutorial.pdf">Java Tutorial PDF</a>
</body>
</html>

ผลลัพธ์: ลิงก์แรกมีขอบสีส้มเพราะ href ลงท้ายด้วย "htm" ลิงก์ที่สองลงท้ายด้วย "pdf" จึงไม่ตรง เหมาะสำหรับจัดสไตล์ลิงก์ตามประเภทไฟล์ (.pdf, .doc, .jpg, เป็นต้น)