การเลือกองค์ประกอบด้วย id ที่ไม่ซ้ำใน CSS

อย่างที่คุณทราบแล้ว คลาสมีวัตถุประสงค์เพื่อกำหนดให้กับกลุ่มขององค์ประกอบ นอกจากคลาสแล้ว เรายังสามารถเลือกองค์ประกอบด้วย id ได้อีกด้วย ซึ่งหมายถึงตัวระบุที่ไม่ซ้ำขององค์ัพประกอบ ความหมายของไม่ซ้ำคือ หากในหน้าของเรามีองค์ประกอบที่มี id นั้นอยู่แล้ว จะไม่ควรมีองค์ประกอบอื่นที่มี id เดียวกันอีก

ตัวระบุที่ไม่ซ้ำถูกกำหนดโดยใช้แอตทริบิวต์ id ซึ่งภายในจะเขียนชื่อที่เราคิดขึ้นมา ตัวอย่างเช่น ลองสร้างบล็อกสองอัน อันแรกกำหนด id เป็นค่า block1 และอันที่สองเป็นค่า block2:

html<div id="block1">
  <p>text</p>
  <p>text</p>
</div>
<div id="block2">
  <p>text</p>
  <p>text</p>
</div>

เพื่อที่จะอ้างอิงถึงองค์ประกอบที่มี id ที่กำหนดไว้ ต้องเขียนสัญลักษณ์ # และชื่อที่เราคิดขึ้นมา ดังนี้:

css#block1 {
  color: red;
}
#block2 {
  color: green;
}

html<div id="elem1">
  <h2>Title</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div id="elem2">
  <h2>Title</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>
<div id="elem3">
  <h2>Title</h2>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>