ตัวเลือกการจัดกลุ่ม 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> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
