skip to main content

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

css

Кратко 🔗

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

Пример 🔗

<span>Немного текста</span>
<ul>
<li>Взять носки</li>
<li><span>Взять документы</span></li>
<li>Взять топор</li>
</ul>
<p>Немного <span>другого</span> текста</p>
span {
background-color: chocolate;
}

See the Pen tag selector by Denis Ezhkov (@ezhkov) on CodePen.

Как пишется 🔗

тег { стили }

Как это понять 🔗

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

Подсказки 🔗

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

a {
text-decoration: none; /* Убрали встроенное подчеркивание */
border-bottom: 1px dashed coral; /* Имитировали пунктирное подчеркивание при помощи нижней рамки */
}

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

В работе 🔗

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

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

Автор: Денис,