เวลาเราเขียน CSS เราจะเจอสัญลักษณ์อยู่หลายแบบเลย แต่ที่ใช้กันส่วนใหญ่จะเจอ 4 แบบนี้ คือ
- แบบเว้นวรรค เรียกว่า Descendant Selector
- แบบใช้เครื่องหมาย > เรียกว่า Child Selector
- แบบใช้เครื่องหมาย + เรียกว่า Adjacent Sibling Selector
- แบบใช้เครื่องหมาย ~ เรียกว่า General Sibling Selector]
โค้ดเริ่มต้น
เป็นโค้ด HTML ง่ายๆ ด้วยแค่นี้พอ โดย style ที่จะเขียนก็แค่ ตัวอักษรสีแดง และขนาดใหญ่
![](https://kanexkane.com/wp-content/uploads/2021/09/symbol-css-001-1024x565.png)
แบบเว้นวรรค
เป็นแบบที่ใช้กันมากที่สุดแล้วแหละ มันถูกเรียกว่า Descendant Selector
![](https://kanexkane.com/wp-content/uploads/2021/09/symbol-css-002-1024x456.png)
จุดที่มันจะจับก็คือ p ทั้งหมด ที่อยู่ภายในคลาส container ไม่ว่าจะอยู่ลึกแค่ไหนก็ตาม
![](https://kanexkane.com/wp-content/uploads/2021/09/symbol-css-001-ex-1024x565.jpg)
![](https://kanexkane.com/wp-content/uploads/2021/09/symbol-css-001-result-1-1024x482.png)
แบบเครื่องหมาย >
จะเรียกว่า Child Selector โดยมันจะจับเฉพาะชั้นลูกของตัวหลักเท่านั้น
![](https://kanexkane.com/wp-content/uploads/2021/09/symbol-css-003-1024x456.png)
![](https://kanexkane.com/wp-content/uploads/2021/09/symbol-css-003-ex-1024x565.jpg)
ผลลัพธ์ออกมาก็จะเป็นแบบนี้
![](https://kanexkane.com/wp-content/uploads/2021/09/symbol-css-003-result-1024x432.png)
แบบเครื่องหมาย +
มันถูกเรียกว่า Adjacent Sibling Selector โดยมันจะจับตัวต่อไปที่อยู่ในชั้นเดียวกันของตัวที่เรากำหนด
![](https://kanexkane.com/wp-content/uploads/2021/09/symbol-css-004-1024x456.png)
![](https://kanexkane.com/wp-content/uploads/2021/09/symbol-css-004-ex-1024x565.jpg)
ผลลัพธ์ก็จะออกมาแบบนี้
![](https://kanexkane.com/wp-content/uploads/2021/09/symbol-css-004-result-1024x482.png)
แบบเครื่องหมาย ~
มันถูกเรียกว่า General Sibling Selector มันจะจับตัวชั้นเดียวกันที่อยู่ต่อจากตัวที่กำหนดทั้งหมด
![](https://kanexkane.com/wp-content/uploads/2021/09/symbol-css-005-1024x456.png)
![](https://kanexkane.com/wp-content/uploads/2021/09/symbol-css-005-ex-1024x565.jpg)
ผลลัพธ์ก็จะออกมาแบบนี้
![](https://kanexkane.com/wp-content/uploads/2021/09/symbol-css-005-result-1024x422.png)
สรุป
ตัวสัญลักษณ์ +, > และ ~ น่าจะเป็นเครื่องหมายหลักๆ ที่ใช้กันในการเขียน CSS แค่นี้ก็สามารถใช้งานกันได้เทพมากขึ้นแล้ว