กำหนด selector โดย ชื่อ element
เป็นแบบที่ใช้กันมาก และใช้ได้ง่ายที่สุด เพราะว่า เป็น element ที่เราคุ้นเคยกันดีอยู่แล้ว เช่น เราจะทำให้ H1 element เป็นตัวหนาและตัวใหญ่ หรือจะให้ p element เป็น font sans-serif
<body>
<h2>หัวข้อที่ 1</h2>
<p>เราก็จะถือว่านี้คือย่อหน้าปรกติ</p>
<h2>หัวข้อที่ 2 </h2>
<p>เนื้อหาส่วนที่ 2</p>
</body>
สิ่งเพิ่มเติมที่ 9.6 โค้ดที่จะใช้ทดสอบ การใช้ selector ในแบบ ชื่อของ element โดยเราต้องการให้มีผลที่ h2 element
h2 { color: red; }
สิ่งเพิ่มเติมที่ 9.7 style rule ที่เรากำหนดให้ h2 element ที่จุดใดๆ มีสีแดง
สิ่งเพิ่มเติมที่ 9.8 จะเห็นได้ว่า h2 เป็นตัวหนังสือสีแดงในทุกๆจุด
เพิ่มเติม
- ถ้าคุณไม่ได้มีการกำหนดอะไรเพิ่มเติม (ไม่ได้มีการเขียน selector? สำหรับ h2 element ขึ้นมาอีกชุด) ทุกหน้า และทุกจุดที่มีการใช้งาน h2 ก็จะแสดงผลตัวอักษรเป็นสีแดงตามที่เราได้กำหนดเอาไว้แล้วนั่นเอง
- selector ไม่จำเป็นต้องการหนดชื่อของ element เสมอไป
- เครื่องหมายดอกจันทร์ * หมายถึงทำกับทุกๆ element ในโค้ดของคุณ
- คุณสามารถเลือกกลุ่มของ element ที่จะเอาไปใช้กับ selector ได้ โดยใช้เครื่องหมาย comma (ลูกน้ำ)คั่นระหว่าง element แต่ละตัว
- ชื่อหรือชนิดของ selector ก็จะต้องรองรับใน browser ที่กำลังใช้งานนั้นๆด้วย