/ ↲
    Расширенный поиск

    CSS

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

    Как выбрать все элементы на странице? И при чём тут лоботомированная сова?

    Время чтения: меньше 5 мин

    Кратко

    Скопировано

    Универсальный селектор * соответствует абсолютно любому тегу, но не включает псевдоэлементы, вроде ::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 и лоботомированные совы».

    Подсказки

    Скопировано

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

    Читайте также