CSS * Selector
Селектор * в CSS выбирает все элементы страницы, в том числе внутри другого элемента. Читайте и смотрите примеры.
Селектор * (астериск) — это универсальный селектор. Он соответствует каждому элементу
в документе, независимо от его типа, идентификатора или класса.
Чаще всего * используют в двух ситуациях: для применения базовых стилей ко всем элементам
страницы (так называемый «сброс стилей»), либо для выбора всех потомков внутри конкретного
контейнера — сочетая * с другим селектором.
В этой главе рассматривается синтаксис, два запускаемых примера, взаимодействие * со
специфичностью, а также особенности производительности, которые следует знать перед его использованием.
Синтаксис
* {
/* css declarations */
}Использованный самостоятельно, * выбирает каждый элемент. В сочетании с другим селектором
и пробелом (комбинатор потомка) он выбирает каждый элемент внутри
этого целевого элемента:
/* every element inside any <div> */
div * {
/* css declarations */
}Специфичность
Универсальный селектор имеет специфичность ноль — (0, 0, 0). Он не добавляет никакого
веса правилу. Это означает, что почти любой другой селектор (имя тега, класс, идентификатор)
переопределит объявление, исходящее от *, — именно поэтому он хорошо подходит для задания
значений по умолчанию, которые впоследствии уточняют более специфичные правила.
Пример: выбор всех элементов
Правило ниже задаёт цвет фона для каждого элемента страницы, включая <html>,
<body>, заголовки и параграфы:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
* {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>* selector example</h2>
<div class="example">
<p id="example1">Lorem ipsum is simply dummy text...</p>
<p id="example2">Lorem ipsum is simply dummy text...</p>
</div>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Пример: выбор всех элементов внутри <div>
Здесь div * нацелен только на элементы, вложенные внутрь <div>.
Отдельный <p> после <div> сохраняет свой фон по умолчанию, тогда как <p> и
<span> внутри <div> получают стиль:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div * {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>* selector example</h2>
<div class="example">
<p id="example1">Lorem ipsum is simply dummy text...</p>
<span id="example2">Lorem ipsum is simply dummy text...</span>
</div>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Распространённое применение: сброс box-sizing
Наиболее популярное реальное применение * — нормализация блочной модели, чтобы внутренние
отступы и рамки больше не расширяли ширину элемента. Этот фрагмент присутствует в бесчисленных
таблицах стилей:
*,
*::before,
*::after {
box-sizing: border-box;
}Смотрите box-sizing, чтобы узнать, что меняет border-box.
Производительность и рекомендации
- Используйте его экономно во вложенных селекторах. Одиночное правило
*обходится дёшево, однако его сочетание в длинных цепочках потомков (например,.nav ul li *) вынуждает браузер обрабатывать больше элементов. Для одного правила сброса стилей это незначительно; избегайте его в глубоко вложенных, часто применяемых селекторах. - Предпочитайте его для сброса стилей, а не для тематического оформления. Поскольку его
специфичность равна
0,*идеально подходит для базовых значений по умолчанию, но плохо работает там, где правило должно иметь приоритет над другими стилями. - Он соответствует псевдоэлементам только при явном указании.
*выбирает элементы;*::beforeи*::afterнужны для покрытия сгенерированного контента, как в приведённом выше сбросе.
Связанные селекторы
- Обзор CSS-селекторов — полный список типов селекторов.
- Селекторы по id и классу — выбор конкретных элементов.
:first-child— структурный псевдокласс.