Универсальный селектор

Универсальный селектор * соответствует абсолютно любому тегу, но не включает псевдоэлементы, вроде ::before и ::after.

Такое CSS-правило, объявленное в начале файла со стилями, установит размер шрифта для всех элементов на странице:

        
          
          * {  font-size: 2rem;}
          * {
  font-size: 2rem;
}

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

Универсальный селектор очень удобен, если какие-то свойства нужно применить ко всем элементам на сайте.

Некоторые используют универсальный селектор для изменения алгоритма расчёта размеров элементов перед началом вёрстки:

        
          
          * {  box-sizing: border-box;}
          * {
  box-sizing: border-box;
}

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

Учитывайте, что это CSS-правило не будет иметь влияния на псевдоэлементы. Алгоритм расчёта нужно будет менять точечно. Или дополнить селектор, упомянув в нём ::before и ::after:

        
          
          *,::before,::after {  box-sizing: border-box;}
          *,
::before,
::after {
  box-sizing: border-box;
}

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

Универсальный селектор можно использовать в комбинированных селекторах, ограничивая его область действия.

Такое CSS-правило применит цвет текста ко всем элементам, вложенным в блок с классом .preview:

        
          
          .preview * {  color: green;}
          .preview * {
  color: green;
}

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

Изменим селектор на вложенный, и цвет изменится у всех прямых потомков блока с классом .preview:

        
          
          .preview > * {  color: green;}
          .preview > * {
  color: green;
}

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

Можно использовать * в смежном селекторе, чтобы правило применялось только в случае, если рядом с элементом есть сосед. Например, такое CSS-правило задаст нижний отступ всем элементам при условии, что они не являются единственными детьми своего родителя:

        
          
          * + * {  margin-bottom: 15em;}
          * + * {
  margin-bottom: 15em;
}

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

Такой приём в шутку называют «лоботомированная сова». Можно подробнее почитать о способах его использования в статье «Аксиоматический CSS и лоботомированные совы».

💡 Не стоит злоупотреблять универсальным селектором. Есть вероятность столкнуться с необходимостью постоянно переопределять заданные с его помощью свойства.