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

    CSS

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

    Выбираем определённые теги в 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;
}

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