/ ↲
    Расширенный поиск

    CSS

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

    Выбираем для стилизации элемент с уникальным атрибутом id.

    Время чтения: меньше 5 мин

    Кратко

    Скопировано

    Селектор по идентификатору находит на странице элемент, которому задан атрибут 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;
}

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

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

    Читайте также