Оновлено: 19.05.2025

Id selector

Frontend CSS Селектори Id selector

Ідентифікатори

Ідентифікатор визначає унікальне ім'я елемента, яке використовується для зміни його стилю і звернення до нього через скрипти.

 

 

Синтаксис

#<Ім'я ідентифікатора> { Опис правил стилю }

Під час опису ідентифікатора спочатку вказується символ решітки (#), потім іде ім'я ідентифікатора. Воно має починатися з латинського символу і може містити в собі символ дефіса (-) і підкреслення (_). Використання українських літер в іменах ідентифікатора неприпустимо. На відміну від класів ідентифікатори мають бути унікальними, іншими словами, зустрічатися в коді документа тільки один раз.


Звернення до ідентифікатора відбувається за допомогою атрибута id, значенням якого виступає ім'я ідентифікатора (id="header"). Символ решітки при цьому вже не вказується.

 

 

Приклад

<!DOCTYPE html>
<html>
  <head>
   <metacharset="utf-8">
   <title>Identifiers</title>
   <style>
    #help {
     position: absolute; /* Absolute positioning */
     left: 160px; /* Position of the element from the left edge */
     top: 50px; /* Position from top edge */
     width: 225px /* Block width */
     padding: 5px /* Margin around text */
     background: #f0f0f0; /* Background color */
    }
   </style>
  </head>
  <body>
   <div id="help">
    This element helps when you are aware that
    the fact that you do not understand at all who and how can help you. Exactly
    at this point, we suggest that no one can help you.
   </div>
  </body>
</html>