Разберем подробно понятие селектора идентификатора. Основная его задача на практике заключается в выделении некоторого компонента по уникальному обозначению, то есть атрибуту id. В коде обозначается значком «#» после которого следует его название.

В качестве примера разберем довольно частую задачу, которая заключается к присвоению блоку определенной высоты:

#superBlock {
   height: 200px;
}

Данный селектор имеет много общих черт с селекторами класса. С его помощью, как и с помощью селектора класса, выбранному элементу можно присвоить определенный стиль или характеристики.

Пример: для начала работы с селектором id нужно создать атрибут, посредством которого будут присваиваться классы:

<ul>
   <li id="important">Наша строка с уникальным стилем</li>
   <li>Другая строка</li>
   <li>Другая строка</li>
</ul>
 
<style>
   /* пееркрасим строку с id="important" в красный */
   #active {
      color: red;
   }
</style>

Стоит отметить то, что аналогично селектору класса, используя селектор id совместно с универсальным мы получаем бессмыслицу:

/* ниже два абсолютно тождественных стиля оформления */
*#important {}
#important {}

Также важным является то, что селекторы id и типа можно объединять, что в свою очередь объединит свойства, присвоенные данным селекторам:

li#important {
   color: red;
}

Данное правило справедливо только при употреблении такого id. Однако эффективность подобной конструкции мала, поскольку один и тот же id может встречаться на странице только один раз. Но все же этот пример имеет смысл в строго определенных случаях. К примеру, для элементов какого-то нетипичного списка.

Еще одна особенность в работе с селектором идентификатора — регистрозависимость, то есть принципиально важное различие в использовании заглавных и строчных символов.

Различие id и классов

Основное сходство заключается в способности селекторов идентификатора и класса присвоить разные стили одному и тому же тегу.

Теперь стоит перечислить их различия:

• первая особенность заключается в том, что селектор id имеет больший приоритет нежели класса и в случае пересечения их на одном и том же теге, оформление он получит от своего айдишника;
• идентификаторы присваиваются только одному конкретному элементу, в то время как класс может применяться к нескольким;

Ограничения в применении

Применение идентификаторов является рациональным при обращении к элементам в рамках скрипта. В следствие этого использование идентификаторов зачастую сопровождается применением скриптов. В тоже время id подчеркивается уникальность стиля элемента (тот факт, что что-то встречается в коде страницы лишь один раз). Ярким примером использования идентификаторов являются формы и динамические элементы интерфейса.

При прочих раскладах нам обычно подходит использование классов.