Selectors

#HelloFrontend #HelloErmine #HelloWorld2021

Selector คือ สิ่งที่กำหนดไว้เพื่อใช้สำหรับค้นหาหรือเลือก HTML element ที่เราต้องการกำหนด style โดยเเบ่งหลัก ๆ ได้ 4 ประเภท ได้เเก่

1. Class Selector

Class Selector เป็น selector ที่อ้างอิงกับ attribute ที่ชื่อว่า class ซึ่งเขียนอยู่ภายใน tag ของ HTML โดยที่ tag ของ HTML ใดมี class ที่ตรงกับ Class Selector ที่กำหนด คุณสมบัติของ CSS ที่กำหนดไว้กับ selector ก็จะมีผลต่อ tag นั้น (class เรียกใช้ได้หลายครั้ง)

วิธีการเขียน Class Selector :

เขียนได้โดยการเขียนชื่อ selector ไว้หลังเครื่องหมายจุด ( . ) จากนั้นตามด้วยกลุ่มของ properties

.myClass {
        font: bold 12px Tahoma; 
        color: #009;
 }

2. ID Selector

ID Selector เป็น selector ที่อ้างอิงกับ attribute ที่ชื่อว่า id ซึ่งเขียนอยู่ภายใน tag ของ HTML โดยที่ tag ของ HTML ใดมี id ที่ตรงกับ ID Selectors ที่กำหนด คุณสมบัติของ CSS ที่กำหนดไว้กับ selector ก็จะมีผลต่อ tag นั้น (id นิยมเรียกใช้ครั้งเดียว)

วิธีการเขียน ID Selector :

เขียนได้โดยการเขียนชื่อ selector ไว้หลังเครื่องหมายชาร์ป (# ) จากนั้นตามด้วยกลุ่มของ properties

#myId {
        font: bold 12px Tahoma; 
        color: #009;
 }

3. Tag Selector หรือ Element Selector

Tag Selector เป็น selector ที่อ้างอิงกับชื่อ tag ของ HTML โดยตรง เช่น <p>, <div>, <h1>, <h2> เป็นต้น นั่นหมายความว่า ถ้าหากกำหนดคุณสมบัติให้แก่ Tag Selector นี้แล้ว tag ของ HTML ที่มีชื่อเดียวกับ selector นี้จะมีคุณสมบัติของ CSS เหมือนกันหมดทุก tag ภายในเว็บเพจนั้น

วิธีการเขียน Tag Selector :

เขียนได้โดยการเขียนชื่อ tag ของ HTML ลงไปได้เลย จากนั้นตามด้วยกลุ่มของ properties

h1 {
        font-family: Tahoma; 
        color: #009;
 }

4. Selector กลุ่ม Pseudo-class

เป็นการกำหนด selector อีกประเภทหนึ่งที่จะเหมือนโคลน class เดิมที่มีอยู่ ให้เเสดงผลในรูปเเบบต่างจากเดิม โดยมีการกำหนดว่าผู้ใช้กระทำอะไรกับข้อมูลที่อยู่ใน class เดิมตอนนั้น คุณลักษณะบนหน้าเว็บไซต์ของส่วนนั้นก็จะเปลี่ยนไปตามที่กำหนดใหม่ โดยที่ใช้งานหลัก ๆ จะมีดังนี้

Pseudo-class	Purpose
:link	กำหนด style ให้กับลิงก์ปกติที่ยังไม่เคยถูกคลิก
:visited	กำหนด style ให้กับลิงก์ที่เคยถูกคลิกแล้ว
:hover	กำหนด style ให้กับลิงก์เมื่อเลื่อนเมาส์ไปอยู่เหนือลิงก์
:active	กำหนด style ให้กับลิงก์ขณะถูกคลิก
:focus	กำหนด style ให้กับ element ขณะถูก focus
:first-child	กำหนด style ให้กับ element ที่เป็น first child ของ element อื่น ๆ

ตัวอย่าง

:hover

HTML

<h2>try to test this pseudo-code</h2>

CSS

h2 {
    border: darkmagenta;
    border-style: double;
}

h2:hover {
    border: none;
    background-color: cyan;
    text-transform: uppercase;
}

ตอนที่ยังไม่ได้ทำอะไร จะเเสดงบนหน้าเว็บไซต์ดังภาพ

เมื่อขยับเมาส์ผ่านไปยังบริเวณของข้อความ ข้อความจะเปลี่ยนลักษณะมาเป็นดังภาพ

หากขยับเมาส์ออกจากข้อความก็จะกลับไปเเสดงผลตามเดิม