บทบาทของ CSS :target Selector

ใช้ :target เพื่อ Highlight Element ที่เป็น Target ของ URL Fragment (Anchor Link)

ตัวอย่าง

<!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>This is demo text.</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>

การทำงาน: เมื่อคลิก Link #tut1 URL จะกลายเป็น #tut1 Element ที่ id="tut1" จะถูก Selector :target จับได้และเปลี่ยนสไตล์