Универсальный селектор css: Универсальный селектор * | CSS справочник

Leave a Comment / Css / By /

Универсальный селектор | htmlbook.ru

Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы.

Для обозначения универсального селектора применяется символ звёздочки (*) и в общем случае синтаксис будет следующий.

* { Описание правил стиля }

В некоторых случаях указывать универсальный селектор не обязательно. Так, например, записи *.class и .class являются идентичными по своему результату.

В примере 14.1 показано одно из возможных приложений универсального селектора — выбор шрифта и размера текста для всех элементов документа.

Пример 14.1. Использование универсального селектора

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title>Универсальный селектор</title> 
  <style> 
   * { 
    font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт для текста */ 
    font-size: 96%; /* Размер текста */ 
   } 
  </style> 
 </head> 
 <body> 
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
 
 </p> 
 </body> 
</html>

Заметим, что аналогичный результат можно получить, если в данном примере поменять селектор * на BODY.

Вопросы для проверки

1. Какой стиль установит красный цвет текста в абзаце?

  1. * HTML P { color: red; }
  2. HTML * P { color: red; }
  3. P * { color: red; }
  4. BODY * P { color: red; }
  5. BODY P * { color: red; }

2. Что означает следующая запись в стилях?

* DIV * { background: green; }

  1. Установить фоновый цвет для всех элементов веб-страницы.
  2. Задать цвет для всех текстовых элементов документа.
  3. Установить фоновый цвет для всех элементов внутри контейнера <DIV>.
  4. Установить фоновый цвет только для тегов <DIV>, вложенных в другие контейнеры.
  5. Зеленый цвет фона для всех тегов <DIV> в коде.

3. К какому слову применяется стиль селектора div * em * в следующем фрагменте кода?

<div>
 <h2><em>Lorem</em> ipsum</h2>
 <p>Lorem ipsum dolor sit amet, <strong>consectetuer</strong> adipiscing elit. </p>
 <ul>
  <li><em>Ut</em> wisis enim ad</li> 
  <li>Quis <em><span>nostrud</span></em> exerci</li>
  <li>Tution ullamcorper suscipit</li>
 </ul>
 <em>Nisl</em> ut aliquip exea commodo consequat.
</div>
  1. Lorem
  2. consectetuer
  3. Ut
  4. nostrud
  5. Nisl

Ответы

1. HTML * P { color: red; }

2. Установить фоновый цвет для всех элементов внутри контейнера <DIV>.

3. nostrud

селекторы

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

  1. Кратко
  2. Пример
  3. Как пишется
    1. Комбинированные селекторы
    2. «Лоботомированная сова»
  4. Подсказки

Кратко

Секция статьи «Кратко»

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

Подсказки

Секция статьи «Подсказки»

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

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

Селектор потомка

alt + ←

→

Селектор по атрибуту

alt + →

CSS-селектор, универсальный селектор, селектор типа элемента

CSS-селекторы

Селекторы CSS — это теги HTML, к которым применяется стиль CSS. Это может быть любой тег, такой как или и т. д. Это шаблоны, используемые для выбора тегов HTML, которые вы хотите стилизовать. Эти шаблоны могут варьироваться от простых имен элементов до богатых контекстных шаблонов.

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


Селектор элемента или селектор типа

Селектор элемента CSS или селектор типа соответствует вхождениям тех тегов, которые указаны в списке.


пример
р {размер шрифта: 32px; }

Выше код CSS устанавливает размер шрифта всего абзаца равным 32.

Эта строка отображается размером шрифта по умолчанию

Строка, сформированная с помощью селектора элементов

Когда вы запускаете приведенный выше HTML-код в браузере, вы можете увидеть первую строку с размером шрифта по умолчанию, а строки внутри элемента имеют размер шрифта, измененный на 32 пикселя.

Выход

:


Универсальный переключатель

Универсальный селектор задает значение для всех элементов HTML-документа.


пример
* {размер шрифта: 14 пикселей;}

Приведенный выше код CSS устанавливает размер шрифта = 14 пикселей для всего HTML-документа.

Универсальный селектор представляет собой звездочку (*), действует как подстановочный знак и соответствует всем типам элементов на странице HTML. В некоторых ситуациях вы хотите применить правило ко всем элементам на HTML-странице, тогда вы можете использовать этот селектор.

Универсальный селектор устанавливает для всех размеров шрифта 22 в этом документе.

Когда вы запускаете приведенный выше HTML-код в браузере, вы можете увидеть, что все размеры шрифта установлены на 32 пикселя.

Сгруппированные селекторы

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

пример
h2 {цвет: #FF0066;} h3 {цвет: #FF0066;} р {цвет: #FF0066;}

Вместо указанных выше нескольких селекторов вы можете сгруппировать их следующим образом:

h2,h3,p {цвет: #FF0066;}

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

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

Этого нет в группе

Эти элементы также сгруппированы

Эта строка не находится в сгруппированном селекторе.

Этот пункт также в группе

output

Из приведенного выше изображения вы можете понять, как сгруппированный селектор стилизует HTML-документ.


Селектор CSS: универсальный селектор (`*`)

Могу ли я использовать

Поиск

?

Селектор CSS: универсальный селектор (`*`)

  • Глобальное использование
    97,56% + 0% знак равно 97,56%
IE
  1. 6: Not supported
  2. 7 — 10: Supported
  3. 42% — Supported»> 11: Supported
Edge
  1. 12 — 107: Supported
  2. 108: Supported
Firefox
  1. 2 — 106: Поддерживается
  2. 107: Поддерживается
  3. 108 — 109: Поддерживается
Хром
  1. 4 — 107: Поддерживается
  2. 108: Поддерживается
  3. 109 — 111: Поддерживается
Safari
  1. 8 3,111185.19185185185185185185185185185185.1085. — TP: поддержан
Opera
  1. 10 — 91: Поддерживается
  2. 92: Поддерживается
Сафари на IOS
  1. 72% — Supported»> 3.2 — 16.1: поддержал
  2. 1 16.2: Поддержание
  3. 3,2 — 16.1: поддержано
    4. 21 16.2: Поддержание
  4. .0085
Opera Mini
  1. all: Support unknown
Android Browser
  1. 2.1 — 4.4.4: Support unknown
  2. 108: Supported
Opera Mobile
  1. 12 — 12.1: Supported
  2. 72: Поддерживается
Chrome для Android
  1. 108: Поддерживается
Firefox для Android

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *