Клавиша / esc

Селектор по тегу

Выбираем определённые теги в HTML для их стилизации.

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

Кратко

Скопировано

Селектор по тегу находит элемент на странице по имени тега.

Пример

Скопировано
        
          
          <p>Собираясь в отпуск, нужно <span>не забыть</span>:</p><ul>  <li>взять носки;</li>  <li><span>взять документы</span>;</li>  <li>взять топор.</li></ul><p>И выделить в списке <span>самое главное</span>.</p>
          <p>Собираясь в отпуск, нужно <span>не забыть</span>:</p>
<ul>
  <li>взять носки;</li>
  <li><span>взять документы</span>;</li>
  <li>взять топор.</li>
</ul>
<p>И выделить в списке <span>самое главное</span>.</p>

        
        
          
        
      
        
          
          span {  background-color: #2E9AFF;}
          span {
  background-color: #2E9AFF;
}

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Скопировано
        
          
          h1 {  font-weight: 400;}
          h1 {
  font-weight: 400;
}

        
        
          
        
      

Как понять

Скопировано

Когда нужно применить одни и те же правила к определённым тегам, используется селектор по тегу. Он применяется ко всем тегам с таким названием вне зависимости от вложенности.

Подсказки

Скопировано

Яркий пример — мы задали стиль подчёркивания для всех ссылок при помощи селектора по тегу. Убираем встроенное подчёркивание и имитируем вместо него пунктирное подчёркивание при помощи нижней рамки:

        
          
          a {  text-decoration: none;  border-bottom: 1px dashed coral;}
          a {
  text-decoration: none;
  border-bottom: 1px dashed coral;
}

        
        
          
        
      

И это повлечёт за собой появление нижнего подчёркивания не только у текстовых ссылок, но и любых других (например, ссылок с иконкой, либо ссылочных картинок).

На практике

Скопировано

Денис Ежков советует

Скопировано

🛠 Чаще всего этот селектор применяется в самом начале файла CSS-стилей, чтобы переопределить встроенные стили браузера для некоторых тегов. Например, сразу определить стили для тегов заголовков или задать внешний вид для абзацев.

        
          
          h1,h2,h3 {  font-weight: 500;}p {  margin-bottom: 0.5em;}
          h1,
h2,
h3 {
  font-weight: 500;
}

p {
  margin-bottom: 0.5em;
}

        
        
          
        
      

🛠 Селекторы по тегам активно используются в техниках сброса и нормализации стилей.

        
          
          h1,h2,h3,h4,h5,h6,p,figure {  margin: 0;}ul,ol {  padding: 0;  list-style: none;}button {  border: none;  background-color: transparent;  padding: 0;}
          h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

button {
  border: none;
  background-color: transparent;
  padding: 0;
}