คลาสขององค์ประกอบใน CSS

ในบทเรียนก่อนหน้านี้เราเลือกองค์ประกอบ ของหน้าตามชื่อแท็ก กำหนดสไตล์ ตัวอย่างเช่น ให้กับย่อหน้าทั้งหมดพร้อมกัน ในหน้า อย่างไรก็ตาม อาจมีย่อหน้าประเภทต่าง ๆ ที่ จำเป็นต้องใช้สไตล์ต่างกัน เพื่อ แก้ปัญหาดังกล่าวสามารถจัดย่อหน้าที่ต่างกัน ให้อยู่ใน คลาส CSS ที่ต่างกันได้

ในการจัดแท็กให้อยู่ในคลาสใดคลาสหนึ่ง จำเป็นต้อง เขียนแอตทริบิวต์ class ให้กับแท็กนั้น และภายในแอตทริบิวต์ - ชื่อคลาสที่คุณคิดขึ้น ประกอบด้วยตัวอักษร ตัวเลข เครื่องหมายขีดล่าง และขีดกลาง

มาดูตัวอย่างกัน สร้างย่อหน้า ด้วยคลาสสองประเภท - eee และ zzz:

<p class="eee">
	paragraph with class eee
</p>
<p class="eee">
	paragraph with class eee
</p>
<p class="zzz">
	paragraph with class zzz
</p>
<p class="zzz">
	paragraph with class zzz
</p>

ตอนนี้ให้เข้าถึงใน CSS ไปยังย่อหน้า ที่มีคลาสต่างกันและกำหนดสไตล์บางอย่างให้กับพวกมัน ตัวอย่างเช่น กำหนดสีแดงให้กับย่อหน้าที่มีคลาส zzz และย่อหน้าที่มีคลาส eee - เป็นสีเขียว

สำหรับการนี้ในไฟล์ CSS จำเป็นต้องเข้าถึงไปยัง คลาสของเรา ไวยากรณ์การเข้าถึงมีดังต่อไปนี้ : เริ่มต้นด้วยเครื่องหมายจุด จากนั้นจึงเป็น ชื่อคลาสที่เราคิดขึ้น นั่นคือสำหรับ การเข้าถึงคลาส eee ต้องเขียน .eee และสำหรับคลาส zzz - เขียน .zzz

ดังนั้น ลองทำตามที่อธิบายกัน เพิ่มเข้าไปใน HTML ของเราด้วยสไตล์ CSS สำหรับคลาสที่ เรากำหนด:

.eee {
	color: green;
}
.zzz {
	color: red;
}

หากรันโค้ดของเรา ผลลัพธ์ที่ได้จะเป็น ดังนี้:

กำหนดให้โค้ดต่อไปนี้:

<ul>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
</ul>

กำหนดสีแดงให้กับองค์ประกอบที่มีคลาส odd และสีเขียว - ให้กับองค์ประกอบที่มี คลาส eve

กำหนดให้โค้ดต่อไปนี้:

<h2 class="eee">Title</h2>
<p class="eee">
	paragraph
</p>
<p class="eee">
	paragraph
</p>
<p>
	paragraph without class
</p>

<ul class="eee">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

กำหนดสีแดงให้กับองค์ประกอบทั้งหมดที่มีคลาส eee

อธิบายว่าทำไมในงานก่อนหน้านี้แท็ก li จึงถูกกำหนดให้เป็นสีแดง แม้ว่าคลาส ที่กำหนดสีจะถูกกำหนดให้กับแท็ก ul