แท็กที่มีคลาสที่กำหนดใน CSS

สมมติว่าเรามีสองประเภทของแท็กที่มีคลาสเหมือนกัน ตัวอย่างเช่น ให้ทั้งหัวเรื่อง h2, และย่อหน้าทั้งหมดมีคลาสเดียวกัน:

<h2 class="eee">Title</h2>
<p class="eee">
	text
</p>

<h2 class="eee">Title</h2>
<p class="eee">
	text
</p>

เราสามารถ ตัวอย่างเช่น กำหนดสีให้กับองค์ประกอบทั้งหมด ที่มีคลาสดังกล่าวเป็นสีแดง:

.eee {
	color: red;
}

อย่างไรก็ตาม เราสามารถอ้างอิงไปยังแท็กเฉพาะ ที่มีคลาสได้ ตัวอย่างเช่น เราสามารถเลือกเฉพาะ h2 ทั้งหมดที่มีคลาส eee และเลือกเฉพาะ p ทั้งหมดที่มีคลาสนี้แยกต่างหาก

ในการทำเช่นนี้ ในตัวเลือก เราต้องเขียนชื่อ แท็ก ตามด้วยชื่อคลาสติดกัน ตัวอย่างเช่น ลองกำหนดสีให้กับ h2 ที่มีคลาสของเรา เป็นสีแดง และย่อหน้าที่มีคลาสดังกล่าว - เป็นสีเขียว:

h2.eee {
	color: red;
}
p.eee {
	color: green;
}

มีโค้ดต่อไปนี้:

<h2 class="header">text</h2>
<h2 class="header">text</h2>
<h3 class="header">text</h3>
<h3 class="header">text</h3>

.header {
	color: red;
}

ให้กำหนดขนาด h2 ทั้งหมดที่มีคลาส header เป็น 40px และ h3 ทั้งหมดที่มี คลาสนี้ - เป็นขนาด 30px