CSS селектор типа

Значение и применение

Селектор типа определяет HTML-элемент, к которому будет применен стиль. Селекторы типа легко определить в стилях, так как они имеют одноимённые наименования с форматируемыми элементами, например:

p - сообщает браузеру, что необходимо отформатировать все HTML теги <p> (параграф).
table - сообщает браузеру, что необходимо отформатировать все HTML теги <table> (таблица).
li - сообщает браузеру, что необходимо отформатировать все HTML теги <li> (элемент списка).

Попробуйте селектор по имени тега

Селектор типа выбирает элементы по имени тега.

Свой селектор

Совпадения отмечены оранжевым фоном и обводкой.

HTML примера

HTML

<section class="card">
  <h3 id="title">Заголовок карточки</h3>
  <p class="note">Первый абзац — .note</p>
  <div class="nested">
    <p>Вложенный абзац <span class="note">и span.note</span></p>
  </div>
  <p>Второй абзац карточки</p>
  <p class="note">Третий абзац — .note</p>
</section>

Поддержка браузерами

Спецификация: selectors

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьcss.selectors.type
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`type`	✓1	✓12	✓1	✓3.5	✓1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1
`namespaces`	✓1	✓12	✓1	✓8	✓1.3	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1

поддерживается с ограничениями нет поддержки нет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS

element {
блок объявлений;
}

Версия CSS

CSS1

Пример использования

Рассмотрим пример, в котором с использованием селектора типа мы стилизуем все заголовки второго уровня (<h2>):

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Селектор типа</title>
    <style>
      h2 {
        font-family: Arial; /* задаем тип шрифта Arial */
        color: green; /* задаем цвет текста*/
        margin-top: 50px; /* добавляем отступ от верхнего края элемента */
      }
    </style>
  </head>
  <body>
    <h2>Обычный заголовок второго уровня</h2>
    <h2>Обычный заголовок второго уровня</h2>
    <h2>Обычный заголовок второго уровня</h2>
  </body>
</html>

Результат нашего примера:

Рис. 3б Пример использования селектора типа.