ตัวเลือกการจัดกลุ่ม CSS ใช้เพื่อเลือกหลายองค์ประกอบและจัดรูปแบบด้วยกัน ซึ่งจะช่วยลดโค้ดและความพยายามเพิ่มเติมในการประกาศรูปแบบทั่วไปสำหรับแต่ละองค์ประกอบ ในการจัดกลุ่มตัวเลือก ตัวเลือกแต่ละตัวจะถูกคั่นด้วยช่องว่าง
ไวยากรณ์
ไวยากรณ์สำหรับตัวเลือกการจัดกลุ่ม CSS มีดังต่อไปนี้ -
element, element { /*declarations*/ }
ตัวอย่างต่อไปนี้แสดงตัวเลือกการจัดกลุ่ม CSS -
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> article, p, img { display: block; margin: auto; text-align: center; border-bottom: double orange; } </style> </head> <body> <article>Demo Text</article> <p>This is demo text.</p> <br/> <img src="https://www.tutorialspoint.com/swing/images/swing.jpg"> </body> </html>
ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> div::after,p::after{ content: "Demo text"; margin: 4px; box-shadow: inset 0 0 4px darkorange; } </style> </head> <body> <div></div> <p>This is example text.</p> </body> </html>
ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -