Selector จะทำให้เราสามารถเลือกได้ว่าต้องการจะจัดการกับองค์ประกอบในหน้า HTML ของเราได้อย่างไร ต้องการกำหนดรูปแบบที่ตรงไหน ในตอนนี้จะเป็นการกำหนด selector โดยจัดเป็น group
กำหนดโดยใช้ "group" รวมกลุ่มของลักษณะที่มีรูปแบบเหมือนกัน (Grouping Selectors)
การใช้ Grouping Selectors ก็ต่อเมื่อมี element หลายๆ ตัว ที่มีรูปแบบเหมือนกัน เช่น ตำแหน่งเหมือนกัน, สีเหมือนกัน เป็นต้น
โค้ด: เลือกทั้งหมด
h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p {
text-align: center;
color: blue;
}
โค้ด: เลือกทั้งหมด
h1, h2, p {
text-align: center;
color: blue;
}
การเรียกใช้ก็เรียกใช้ปกติ เช่น <p> ข้อความ </p>
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello MindPHP!</h1>
<h2>MindPHP!</h2>
<p>www.mimdphp.com</p>
</body>
</html>