На какие элементы не влияет *?

На какие элементы не влияет селектор *

Селектор (универсальный селектор) — один из самых мощных CSS селекторов, который выбирает все элементы на странице. Однако существуют четкие ограничения на то, что он может влиять.

Что такое селектор *

Селектор* (universal selector) выбирает все элементы в DOM и применяет к ним CSS правила:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Это эквивалентно:

html, body, div, span, p, a, button, input, /* и ВСЕ другие элементы */ {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

На что НЕ влияет селектор *

1. Псевдоэлементы

Селектор* не влияет на ::before и ::after напрямую:

* {
  color: red; /* Влияет на реальные элементы */
}

p::before {
  color: blue; /* НЕ наследуется от * для ::before */
  content: 'Префикс: ';
}

Что происходит:

<!-- color будет red из * -->
<p>Текст</p>

<!-- ::before получит color: blue, не red -->
<p>::before</p>

2. Наследуемые свойства через родителей

Селектор* не переопределяет явно установленные наследуемые свойства:

body {
  font-family: Arial;
}

* {
  font-family: 'Times New Roman'; /* Переопределит Arial для ВСЕХ элементов */
}

p {
  font-family: Georgia; /* Georgia имеет приоритет над * */
}

Включается каскадность CSS. Если элементу явно установлено свойство, оно имеет приоритет над*.

3. Встроенные стили и !important

Селектор* имеет низкую специфичность и теряет встроенным стилям и !important:

* {
  color: red;
}

<!-- Встроенный style имеет приоритет -->
<p style="color: blue;">Текст будет синий</p>

<!-- !important переопределяет * -->
<p style="color: red !important;">Красный</p>

4. Не применяется к document и window

Селектор* выбирает только элементы в DOM дереве, а не сами объекты document или window:

* {
  /* Не влияет на window или document объекты */
}

// Это JavaScript свойства, не CSS элементы
document.title = 'Заголовок';
window.scrollY = 100;

5. Свойства, которые не наследуются

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

НЕ наследуемые свойства:

• margin
• padding
• border
• width, height
• background
• display
• position
• z-index

* {
  margin: 10px; /* Применится к каждому элементу отдельно */
  font-size: 16px; /* Будет применено и наследоваться */
}

/* div получит margin: 10px, но не "наследует" его дочерним элементам */
div {
  margin: 10px;
}

/* Дочерний элемент должен получить свой margin */
span {
  margin: 0; /* Нужно явно установить */
}

6. Псевдоклассы состояния

Селектор* не может напрямую влиять на состояния элементов:

/* Это НЕ сработает как ожидается */
* {
  :hover { color: red; } /* Синтаксическая ошибка */
}

/* Правильно */
*:hover {
  color: red;
}

Практические примеры

Пример 1: Reset стили (правильно)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
  line-height: 1.5;
  color: #333;
}

Здесь * убирает стандартные отступы у всех элементов, что правильно.

Пример 2: Селектор* с более специфичными правилами

/* Низкая специфичность */
* {
  color: black;
  font-size: 14px;
}

/* Более специфичные правила переопределяют * */
h1 {
  font-size: 32px; /* Имеет приоритет */
}

.highlight {
  color: red; /* Имеет приоритет */
}

/* ID имеет самый высокий приоритет */
#special {
  color: blue;
}

Пример 3: Наследуемые vs не наследуемые свойства

* {
  color: red; /* Наследуется - дочерние элементы будут красные */
  margin: 10px; /* НЕ наследуется - каждый элемент получит margin отдельно */
}

div {
  color: red; /* От родителя */
  margin: 10px; /* От * */
}

span {
  color: red; /* Наследовано от div */
  margin: 0; /* От *, но будет 10px если не переопределить */
}

Пример 4: Специфичность

/* Специфичность: 0-0-1 (очень низкая) */
* { color: blue; }

/* Специфичность: 0-1-0 (выше, чем *) */
.text { color: red; }

/* Специфичность: 0-0-2 (выше, чем *, но ниже .text) */
p { color: green; }

/* Специфичность: 0-1-1 (самая высокая) */
p.text { color: yellow; }

<!-- Будет yellow (самая высокая специфичность) -->
<p class="text">Текст</p>

<!-- Будет red (class выше * и p) -->
<span class="text">Спан</span>

<!-- Будет green (p выше *, но для p элемента) -->
<p>Параграф</p>

<!-- Будет blue (* имеет самую низкую специфичность) -->
<div>Див</div>

Когда использовать селектор *

/* Правильное использование - box-sizing reset */
* {
  box-sizing: border-box;
}

/* Правильное использование - убрать стандартные отступы */
* {
  margin: 0;
  padding: 0;
}

/* Плохое использование - устанавливать много свойств */
* {
  color: red;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  /* Это сработает, но сделает весь код медленнее и тяжелее переопределять */
}

Вывод

Селектор* очень мощный, но имеет ограничения:

1. Имеет низкую специфичность - теряет более конкретным селекторам
2. Не влияет на псевдоэлементы напрямую
3. Не может переопределить встроенные стили или !important
4. Не выбирает сами объекты JavaScript (document, window)
5. Применяется к каждому элементу в DOM отдельно

Используй* аккуратно, чтобы сбросить стандартные стили (margin, padding, box-sizing), и избегай применять много свойств к*, так как это снижает производительность и усложняет отладку CSS каскадности.