เข้าใจการใช้สัญลักษณ์ + > ~ ใน CSS


เวลาเราเขียน CSS เราจะเจอสัญลักษณ์อยู่หลายแบบเลย แต่ที่ใช้กันส่วนใหญ่จะเจอ 4 แบบนี้ คือ

  • แบบเว้นวรรค เรียกว่า Descendant Selector
  • แบบใช้เครื่องหมาย > เรียกว่า Child Selector
  • แบบใช้เครื่องหมาย + เรียกว่า Adjacent Sibling Selector
  • แบบใช้เครื่องหมาย ~ เรียกว่า General Sibling Selector]

โค้ดเริ่มต้น

เป็นโค้ด HTML ง่ายๆ ด้วยแค่นี้พอ โดย style ที่จะเขียนก็แค่ ตัวอักษรสีแดง และขนาดใหญ่

แบบเว้นวรรค

เป็นแบบที่ใช้กันมากที่สุดแล้วแหละ มันถูกเรียกว่า Descendant Selector

จุดที่มันจะจับก็คือ p ทั้งหมด ที่อยู่ภายในคลาส container ไม่ว่าจะอยู่ลึกแค่ไหนก็ตาม

ผลลัพธ์ออกมาก็จะเป็นแบบนี้

แบบเครื่องหมาย >

จะเรียกว่า Child Selector โดยมันจะจับเฉพาะชั้นลูกของตัวหลักเท่านั้น

ผลลัพธ์ออกมาก็จะเป็นแบบนี้

แบบเครื่องหมาย +

มันถูกเรียกว่า Adjacent Sibling Selector โดยมันจะจับตัวต่อไปที่อยู่ในชั้นเดียวกันของตัวที่เรากำหนด

ผลลัพธ์ก็จะออกมาแบบนี้

แบบเครื่องหมาย ~

มันถูกเรียกว่า General Sibling Selector มันจะจับตัวชั้นเดียวกันที่อยู่ต่อจากตัวที่กำหนดทั้งหมด

ผลลัพธ์ก็จะออกมาแบบนี้

สรุป

ตัวสัญลักษณ์ +, > และ ~ น่าจะเป็นเครื่องหมายหลักๆ ที่ใช้กันในการเขียน CSS แค่นี้ก็สามารถใช้งานกันได้เทพมากขึ้นแล้ว

5 1 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Navigate

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • คุกกี้ที่จำเป็น
    เปิดใช้งานตลอด

    ประเภทของคุกกี้มีความจำเป็นสำหรับการทำงานของเว็บไซต์ เพื่อให้คุณสามารถใช้ได้อย่างเป็นปกติ และเข้าชมเว็บไซต์ คุณไม่สามารถปิดการทำงานของคุกกี้นี้ในระบบเว็บไซต์ของเราได้

  • คุกกี้เพื่อการวิเคราะห์

    คุกกี้นี้เป็นการเก็บข้อมูลสาธารณะสำหรับการวิเคราะห์ และเก็บสถิติการใช้งานภายในเว็บไซต์นี้เท่านั้น ไม่ได้เก็บข้อมูลส่วนตัวที่ไม่เป็นสาธารณะใดๆ ของผู้ใช้งาน

บันทึกการตั้งค่า