CSS พื้นฐาน: การเลือกองค์ประกอบ ID และ Class

ใน CSS คุณสามารถเลือกองค์ประกอบ class และ id เพื่อใช้สไตล์และปรับแต่งองค์ประกอบบนหน้าเว็บของคุณ นี่คือคำแนะนำโดยละเอียดเกี่ยวกับวิธีใช้:

การเลือกองค์ประกอบ

หากต้องการเลือกอินสแตนซ์ทั้งหมดขององค์ประกอบ HTML เฉพาะ ให้ใช้ชื่อองค์ประกอบเป็นตัวเลือก ตัวอย่างเช่น p เลือก <p> แท็กทั้งหมดในเอกสาร

กำลังเลือก `Class`

หากต้องการเลือกองค์ประกอบที่มีคลาสเดียวกัน ให้ใช้จุด "." ตามด้วยชื่อชั้น ตัวอย่างเช่น เลือก องค์ประกอบ .my-class ทั้งหมดที่มีคลาส my-class

หากต้องการเลือกองค์ประกอบที่มีหลายคลาส ให้ใช้จุด "." และรายชื่อคลาสที่คั่นด้วยช่องว่าง ตัวอย่างเช่น .class1.class2 เลือกองค์ประกอบที่มีทั้งสอง class1 และ class2 คลาส

กำลังเลือก `id`

หากต้องการเลือกองค์ประกอบเฉพาะตาม ให้ id ใช้แฮช "#" ตามด้วยองค์ประกอบ id. ตัวอย่างเช่น #my-id เลือกองค์ประกอบที่มีเครื่องหมาย id my-id.

การรวม `Element`, `Class`, และ `ID` การเลือก

คุณสามารถรวมการเลือกองค์ประกอบ, class และ id เพื่อกำหนดเป้าหมายองค์ประกอบเฉพาะด้วยคลาสเฉพาะ ID และ

ตัวอย่างเช่น div.my-class#my-id เลือก องค์ประกอบ <div> ที่มี class my-class และ ID my-id

นี่คือตัวอย่างเฉพาะของการเลือกองค์ประกอบ class และ id ใน CSS:

/* Select all <p> tags */  
p {  
  color: blue;  
}  
  
/* Select elements with the class "my-class" */  
.my-class {  
  background-color: yellow;  
}  
  
/* Select the element with the ID "my-id" */  
#my-id {  
  font-weight: bold;  
}  
  
/* Combine element, class, and ID selections */  
div.my-class#my-id {  
  border: 1px solid black;  
}

ด้วยการใช้ element, class, และการเลือกรหัส คุณสามารถเลือกและจัดรูปแบบองค์ประกอบเฉพาะหรือกลุ่มขององค์ประกอบบนหน้าเว็บของคุณได้อย่างง่ายดาย

โพสต์ก่อนหน้า

CSS พื้นฐาน: บทนำและไวยากรณ์

โพสต์ถัดไป