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

CSS
На чтение 11 мин Просмотров 32 Опубликовано

Помимо селекторов типа, класса и идентификатора, CSS также предоставляет универсальный селектор, который является самым фундаментальным селектором среди селекторов CSS.

Универсальный селектор — это особый тип селектора в CSS, который выбирает все элементы в документе HTML. Это своего рода подстановочный знак, представленный звездочкой (*).

Если вы хотите применить правило ко всем тегам и контенту на веб-странице, вы можете использовать этот селектор. Другими словами, когда вы используете универсальный селектор, он применяет указанные правила стиля к каждому элементу в документе HTML.

Универсальный селектор сообщает интерпретатору CSS применить стиль ко всем элементам в документе. Однако мы редко используем его, поскольку его область применения широка.

Содержание
  1. Синтаксис для определения универсального селектора в CSS
  2. Групповой селектор против универсального селектора
  3. Установка шрифта по умолчанию для всей страницы
  4. Использование универсального селектора при отладке
  5. Объединение универсального селектора с другими селекторами
  6. С селектором классов
  7. С селектором атрибутов
  8. С псевдоклассом
  9. С селектором потомков
  10. С потомком-комбинатором
  11. с селектором группировки

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

Синтаксис для определения универсального селектора очень прост и понятен. Он состоит из звездочки (*), за которой следует набор фигурных скобок {}, содержащих одно или несколько свойств CSS и их соответствующие значения. Общий синтаксис выглядит следующим образом:

* {
  /* CSS properties*/}

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

Пример 1:

* {
  margin: 0;
  padding: 0;
}

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

Групповой селектор против универсального селектора

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

a, p, h1, h2, h3, h4, p, span, div … … and so on… { 
   color: red;
}

Универсальный селектор обеспечивает гораздо более короткий и эффективный способ достижения того же результата. Код будет таким:

* {
  color: red;
}

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

Установка шрифта по умолчанию для всей страницы

Мы можем использовать универсальный селектор, чтобы установить шрифт по умолчанию для всей страницы. Давайте рассмотрим пример.

Пример 2:

* {
   font-family: Arial, sans-serif;
}

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

Использование универсального селектора при отладке

Мы также можем использовать универсальный селектор как удобный инструмент для отладки. Применив временный стиль ко всем элементам на странице, вы можете быстро определить проблемы, связанные с макетом, границами элементов или стекированием z-index.

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

Пример 3:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    width: 80%;
    margin: auto;
}
.header,.footer {
   height: 50px;
   background-color: lightgrey;
}
.content {
   height: 300px;
}
* {
  outline: 1px solid red;
}
</style>
</head>
<body>
    <div class="container">
    <div class="header">Header</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>
</body>
</html>

Выход:

Использование универсального селектора в CSS для отладки.

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

Объединение универсального селектора с другими селекторами

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

С селектором классов

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

*.class-name {
    /* CSS properties */}

Пример 4:

<!DOCTYPE html>
<html>
<head>
<style>
*.highlight {
    background-color: yellow;
    font-weight: bold;
}
</style>
</head>
<body>
    <h1 class="highlight">This is a highlighted heading.</h1>
    <div class="highlight">This is a highlighted div.</div>
    <p class="highlight">This is a highlighted paragraph.</p>
    <span class="highlight">This is a highlighted span.</span>
</body>
</html>

В этом примере мы объединили универсальный селектор с селектором класса. Селектор *.highlight применит тот же стиль CSS ко всем элементам, имеющим атрибут class со значением «highlight». Все элементы, такие как <p>, <span>, <div> и <h1>, имеющие класс подсветки со значением «highlight», будут отображаться в тех же указанных стилях.

С селектором атрибутов

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

* [attribute-name] {
     /* CSS properties */}

В этом синтаксисе * — универсальный селектор, а [имя-атрибута] — селектор атрибута, который будет выбирать элементы с указанным атрибутом.

Пример 5:

<!DOCTYPE html>
<html>
<head>
<style>
* [heading] {
     border: 2px solid red;
     padding: 10px;
}
</style>
</head>
<body>
    <h1 heading="true">This is a h1 heading.</h1>
    <h2 heading="true">This is a h2 heading.</h2>
    <h3 heading="true">This is a h3 heading.</h3>
</body>
</html>

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

С псевдоклассом

Кроме того, вы можете объединить универсальный селектор CSS с псевдоклассом, чтобы применить стили ко всем элементам, которые соответствуют определенному состоянию или условию. Псевдоклассы выбирают элементы на основе их состояния, например:hover,:focus,:nth-child() и т. д.

Эта комбинация полезна, когда вы хотите применять стили универсально при определенных условиях. Общий синтаксис следующий:

*:pseudo-class {
/* CSS properties */}

В этом синтаксисе мы имеем комбинацию универсального селектора (*) и:pseudo-class. Селектор псевдокласса нацеливается на элементы в определенном состоянии.

Пример 6:

<!DOCTYPE html>
<html>
<head>
<style>
*:hover {
    color: white;
    background-color: red;
}
</style>
</head>
<body>
   <h1>This is a h1 heading. Hover over me!</h1>
   <p>This is a paragraph. Hover over me!</p>
   <div>This is a div. Hover over me!</div>
   <span>This is a span. Hover over me!</span>
</body>
</html>

В этом примере мы объединили универсальный селектор с селектором псевдокласса:hover. Этот селектор применит правило CSS к любому элементу, на который наведен курсор. Элементы <p>, <div>, <span> и <h1> изменят цвет фона на красный, а цвет текста на белый, когда указатель мыши окажется над ними.

С селектором потомков

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

parent-element * {
/* CSS properties */}

В этом синтаксисе parent-element является селектором для родительского элемента. Универсальный селектор (*) выбирает все элементы-потомки родительского элемента.

Пример 7:

<!DOCTYPE html>
<html>
<head>
<style>
.container * {
    font-size: 14px;
    color: blue;
}
</style>
</head>
<body>
    <div class="container">
       <p>This is a paragraph inside the container.</p>
       <div>
          <span>This is a span inside a nested div inside the container.</span>
       </div>
    </div>
    <p>This paragraph is outside the container and will not be styled.</p>
</body>
</html>

В этом примере мы объединили универсальный селектор CSS с селектором потомков, который применит правило CSS ко всем элементам, которые являются потомками div с классом container. Элементы <p> и <span> внутри.container будут иметь указанный размер шрифта и цвет. <p> снаружи.container не будет затронут этим правилом.

С потомком-комбинатором

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

parent-element > * {
    /* CSS properties */}

В этом синтаксисе

  • parent-element — селектор родительского элемента.
  • > — дочерний комбинатор, который выбирает только прямых дочерних элементов родительского элемента.
  • * — универсальный селектор, который выбирает все прямые дочерние элементы.

Пример 8:

<!DOCTYPE html>
<html>
<head>
<style>
ul > * {
   margin-bottom: 10px;
   color: green;
}
</style>
</head>
<body>
<ul>
   <li>List item 1</li>
   <li>List item 2</li>
   <li>List item 3</li>
   <div>This is a div element directly inside a ul element.</div>
   <p>This is a paragraph element directly inside a ul element.</p>
</ul>
<div>
    <p>This paragraph is not a direct child of the ul element. Therefore, it will not be styled.</p>
</div>
</body>
</html>

В этом примере мы объединили универсальный селектор с дочерним комбинатором, который применит указанное правило CSS ко всем прямым дочерним элементам элемента ul.

Элементы <li>, <div> и <p>, которые являются прямыми потомками элемента ul, будут стилизованы с указанными правилами стиля. Поскольку элемент <p> находится вне элемента ul, это правило не будет на него влиять, поскольку он не является прямым потомком ul.

с селектором группировки

Группировка селекторов — это метод, используемый в CSS для применения одних и тех же стилей к нескольким элементам без необходимости писать несколько правил CSS. Мы также можем объединить его с универсальным селектором, используя следующий синтаксис:

selector1, selector2, selector3, * {
    /* CSS properties */}

Давайте рассмотрим пример, в котором мы применим красный цвет и определенное семейство шрифтов ко всем заголовкам (h1, h2) и всем элементам на странице. Посмотрите на код ниже.

Пример 9:

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, * {
    color: blue;
    font-family: Arial, sans-serif;
}
</style>
</head>
<body>
   <h1>This is a heading 1</h1>
   <h2>This is a heading 2</h2>
   <p>This is a paragraph.</p>
   <div>This is a div element.</div>
   <span>This is a span element.</span>
</body>
</html>

В этом примере мы объединили универсальный селектор с группирующим селектором, который применит правило CSS ко всем элементам HTML, включая h1 и h2.

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

Оцените статью
© 2025 Блог о разработке сайтов на HTML, CSS и Javascript
Adblock
detector