วิธีเลือกอิลิเมนต์ที่มีแอตทริบิวต์และค่าที่ระบุด้วย CSS

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

ตัวอย่าง

ลองรันโค้ดด้านล่างเพื่อทดสอบ CSS [attribute="value"] Selector โดยใช้แอตทริบิวต์ rel:

<!DOCTYPE html>
<html>
<head>
  <style>
    a[rel="nofollow"] {
      border: 3px solid blue;
    }
  </style>
</head>
<body>
  <a href="https://qries.com/What-is-Uber-s-business-model-and-how-does-it-compare-with-Ola-s-model-in-India" rel="nofollow">Uber's Business Model</a><br><br>
  <a href="https://www.qries.com/How-does-share-market-work-in-India" rel="noreferrer">Share Market</a>
</body>
</html>

ผลลัพธ์: ลิงก์แรกมีขอบสีน้ำเงินเพราะ rel="nofollow" ตรงกันพอดี ตัวอย่างนี้เหมือน ID 1004062721 แต่ขอบสีน้ำเงินแทนสีส้ม