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

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

        
          
          <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;
}

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

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

        
          
          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;
}

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