Селектор по идентификатору

Селектор по идентификатору находит на странице элемент, которому задан атрибут id с конкретным значением.

        
          
          <p id="first" class="paragraph">Какой-то текст</p><div id="second">Красивый блок</div><form id="last" action="" method="get"></form>
          <p id="first" class="paragraph">Какой-то текст</p>
<div id="second">Красивый блок</div>
<form id="last" action="" method="get"></form>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          #first {  color: red;}#last {  border: 2px solid green;}
          #first {
  color: red;
}

#last {
  border: 2px solid green;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В этом примере в HTML есть три элемента с разными идентификаторами. В CSS для элемента с идентификатором first прописываем, что цвет текста должен быть красным, а для элемента с идентификатором last задаём рамку зелёного цвета шириной в 2 пикселя.

        
          
          #id {  color: black;}
          #id {
  color: black;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если нужно применить стили только к одному конкретному элементу, то ему задают идентификатор при помощи атрибута id и используют его в качестве селектора в CSS.

💡 Идентификатор чувствителен к регистру. Для браузера id="myTag" и id="MyTag" будут двумя разными идентификаторами.

💡 В имени идентификатора нельзя использовать пробел.

💡 Селектор по идентификатору имеет очень высокую специфичность. У одного блока зададим и класс и идентификатор:

        
          
          <section class="class" id="id">  <p>Some text</p></section>
          <section class="class" id="id">
  <p>Some text</p>
</section>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В стилях напишем два блока правил. В первом случае используем в качестве селектора идентификатор, а во втором случае используем в качестве селектора класс.

        
          
          #id {  color: red;}.class {  color: green;}
          #id {
  color: red;
}

.class {
  color: green;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В итоге цвет текста будет красным, потому что селектор по идентификатору более специфичный, чем селектор по классу.

Подробнее про специфичность читайте в статье «Специфичность».