การใช้ :target Selector

การใช้ :target Selector ใน CSS

CSS มี pseudo-class ที่ชื่อว่า :target ซึ่งใช้เลือกองค์ประกอบที่เป็นเป้าหมายของ URL fragment (ส่วนที่อยู่หลังเครื่องหมาย # ใน URL)

เมื่อผู้ใช้คลิกลิงก์ที่มี URL fragment เบราว์เซอร์จะเลื่อนไปยังองค์ประกอบที่มี id ตรงกับ fragment นั้น และ :target จะเลือกองค์ประกอบนั้น ทำให้เราสามารถกำหนดสไตล์พิเศษให้กับองค์ประกอบที่เป็นเป้าหมายได้

ตัวอย่างการใช้งาน

ลองคลิกลิงก์ด้านล่างเพื่อดูการทำงานของ :target:

• ไปยังส่วนที่ 1
• ไปยังส่วนที่ 2
• ไปยังส่วนที่ 3

โค้ด CSS

นี่คือโค้ด CSS ที่ใช้ในตัวอย่างนี้:

.target-section {
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.target-section:target {
    background-color: #ffffcc;
    border-color: #ffcc00;
    box-shadow: 0 0 5px rgba(255, 204, 0, 0.5);
}

ประโยชน์ของ :target

:target มีประโยชน์หลายประการ:

• ช่วยให้ผู้ใช้เห็นตำแหน่งปัจจุบันในหน้าเว็บที่มีเนื้อหายาว
• สามารถใช้สร้าง tabs หรือ accordions แบบง่ายๆ โดยไม่ต้องใช้ JavaScript
• ช่วยเน้นเนื้อหาที่เกี่ยวข้องกับลิงก์ที่ผู้ใช้คลิก
• สามารถใช้ร่วมกับ CSS transitions เพื่อสร้างเอฟเฟกต์การเปลี่ยนแปลงที่นุ่มนวล

ข้อควรระวัง

เมื่อใช้ :target ควรคำนึงถึงสิ่งต่อไปนี้:

• เบราว์เซอร์เก่าบางรุ่นอาจไม่รองรับ :target
• การเปลี่ยนแปลงสไตล์ควรไม่รบกวนการอ่านเนื้อหา
• ควรใช้ transition เพื่อให้การเปลี่ยนแปลงดูนุ่มนวลและไม่รบกวนสายตา
• หากใช้ :target เพื่อสร้าง UI elements เช่น tabs หรือ accordions ควรมี JavaScript เป็นทางเลือกสำรองสำหรับเบราว์เซอร์ที่ไม่รองรับ