CSS * селекторы

Селектор * (символ звездочки) выбирает все элементы внутри документа.

Селектор * может также выбрать все элементы внутри другого элемента.

Версия

CSS2

Синтаксис

*{
css declarations;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      * {
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2> Пример селектора *</h2>
    <div class="example">
      <p id="example1">Lorem Ipsum - это текст-"рыба"...</p>
      <p id="example2">Lorem Ipsum - это текст-"рыба"...</p>
    </div>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>

Рассмотрим другой пример селектора *:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div * {
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора *</h2>
    <div class="example">
      <p id="example1">Lorem Ipsum - это текст-"рыба"...</p>
      <span id="example2">Lorem Ipsum - это текст-"рыба"...</span>
    </div>
    <p>Lorem Ipsum - это текст-"рыба"...</p>
  </body>
</html>

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

chrome edge firefox safari opera
4.0+ 12.0+ 2.0+ 3.1+ 10.0+

Практикуйте свои знания

Какие из перечисленных ниже являются типами CSS селекторов, описанных на w3docs.com?
Считаете ли это полезным?