ელემენტის არჩევა უნიკალური 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>