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

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

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

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

html<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 สำหรับคลาสที่ เรากำหนด:

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

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

html<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>

html<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>