Selector จะทำให้เราสามารถเลือกได้ว่าต้องการจะจัดการกับองค์ประกอบในหน้า HTML ของเราได้อย่างไร ต้องการกำหนดรูปแบบที่ตรงไหน ในตอนนี้จะเป็นการกำหนด selector ด้วย class
กำหนดโดยใช้ "คลาส" (class Selector)
โค้ด: เลือกทั้งหมด
.class_name{
text-align: center;
color: blue;
}
- สามารถเรียกใช้ class ได้ด้วย elements แล้วตามด้วย class
- การเรียกใช้ class="class_name"
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
.class_name{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="class_name">MindPHP with Tag h1 </h1>
<p class="class_name">MindPHP with Tag p</p>
</body>
</html>
** ข้อห้าม : ห้ามขึ้นต้น class ด้วยตัวเลขเด็ดขาด
ผลที่ได้ หรือจะกำหนด class ให้กับตัว element เผื่อเรียกใช้ก็ได้ โดยตัว element อื่นจะไม่สามารถเรียกใช้ได้
โค้ด: เลือกทั้งหมด
p.class_name {
text-align: center;
color: blue;
}
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<style>
p.class_name {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="class_name">MindPHP</h1>
<p class="class_name">www.mindphp.com</p>
</body>
</html>
<h1 class="class_name"> จะไม่สามารถเรียกใช้ได้
** ข้อห้าม : ห้ามขึ้นต้น class ด้วยตัวเลขเด็ดขาด
ผลที่ได้