Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

เน้น anchor ที่ active ด้วย CSS :target


Pseudo-class :target

ใช้ :target จัดสไตล์องค์ประกอบที่มี id ตรงกับ hash ใน URL (เช่น #tut1)

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
  <style>
    :target {
      border: 2px solid #D4D4D4;
      background-color: orange;
      color: white;
    }
  </style>
</head>
<body>
  <p>Click any of the subject below.</p>
  <p><a href="#tut1">Maths</a></p>
  <p><a href="#tut2">Java</a></p>
  <p><a href="#tut3">C++</a></p>
  <p><a href="#tut4">C</a></p>
  <p id="tut1"><b>Maths Tutorial</b></p>
  <p id="tut2"><b>Java Tutorial</b></p>
  <p id="tut3"><b>C++ Tutorial</b></p>
  <p id="tut4"><b>C Tutorial</b></p>
</body>
</html>