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

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

Описание

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

  h1 { color: blue; }

Примечание: как видно из примера, в имя селектора не входят символы < и >, в которые заключены соответствующие элементы. Поэтому, когда вы пишите стиль для элемента <h1>, то набираете только его название - h1.

При использовании селектора типа, стиль будет применен ко всем элементам указанного типа, не зависимо от их уровня вложенности.

Совет: селектор типа является простым селектором, применяющим стиль только к группе элементов определенного типа. В случае, если вам нужно выбрать не все элементы определенного типа, а только один, часть из них или выбрать элементы, относящиеся к разным типам, то стоит воспользоваться селектором класса. Он позволяет выбирать элементы независимо от того, к какому типу они относятся.

Пример:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Пример</title>
    <style>
      p {
        color: red;
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <h1> Добро пожаловать! </h1>

    <div>
      <p> Меня зовут Арни. </p>
      <p> Я играю в онлайн игры. </p>
    </div>
    <p> Моего кота тоже зовут Арни. </p>

  </body>
</html>

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

Добро пожаловать!

Меня зовут Арни.

Я играю в онлайн игры.

Моего кота тоже зовут Арни.