Использование вложенного CSS

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

Вложенный CSS отличается от препроцессоров CSS, таких как Sass, тем, что он анализируется браузером, а не предварительно компилируется препроцессором CSS. Кроме того, в вложенном CSS, специфичность & селектора вложенности похожа на функцию :is(); она рассчитывается с использованием наибольшей специфичности в связанном списке селекторов.

Это руководство демонстрирует различные способы организации вложенности в CSS.

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

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

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

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

/* Without nesting selector */
parent {
  /* parent styles */
  child {
    /* child of parent styles */
  }
}

/* With nesting selector */
parent {
  /* parent styles */
  & child {
    /* child of parent styles */
  }
}

/* the browser will parse both of these as */
parent {
  /* parent styles */
}
parent child {
  /* child of parent styles */
}

Примеры

В этих примерах, один без, а другой с & селектором вложенности, <input> внутри <label> стилизуется по-другому по сравнению с <input>, который является соседним элементом <label>. Это демонстрирует влияние пропуска & селектора вложенности.

Примечание: Этот пример демонстрирует различные результаты в браузерах, реализующих исходную спецификацию по сравнению с текущей спецификацией вложенности. Исходная спецификация вложенности, реализованная в Chrome или Safari до августа 2023 года, требует & комбинирующего селектора. Если ваш браузер поддерживает текущую спецификацию, результат обоих примеров соответствует результату второго примера.

Без селектора вложенности

HTML

<form>
  <label for="name">Name:
    <input type="text" id="name" />
  </label>
  <label for="email">email:</label>
  <input type="text" id="email" />
</form>

CSS

input {
  /* styles for input not in a label  */
  border: tomato 2px solid;
}
label {
  /* styles for label */
  font-family: system-ui;
  font-size: 1.25rem;
  input {
    /* styles for input in a label  */
    border: blue 2px dashed;
  }
}

Результат

С селектором вложенности

HTML

<form>
  <label for="name">Name:
    <input type="text" id="name" />
  </label>
  <label for="email">email:</label>
  <input type="text" id="email" />
</form>

CSS

input {
  /* styles for input not in a label  */
  border: tomato 2px solid;
}
label {
  /* styles for label */
  font-family: system-ui;
  font-size: 1.25rem;
  & input {
    /* styles for input in a label  */
    border: blue 2px dashed;
  }
}

Результат

Комбинирующие селекторы

Комбинирующие селекторы CSS также могут быть использованы с или без & селектора вложенности.

Пример

Вложенный комбинирующий селектор для соседних элементов

В этом примере первый абзац после каждого <h2> выбирается с помощью комбинирующего селектора для соседнего элемента (+) с использованием вложенного CSS.

HTML

<h2>Heading</h2>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

CSS

h2 {
  color: tomato;
  + p {
    color: white;
    background-color: black;
  }
}
/* this code can also be written with the & nesting selector */
/* 
h2 {
  color: tomato;
  & + p {
    color: white;
    background-color: black;
  }
}
*/

Результат

Составные селекторы

При использовании составных селекторов во вложенном CSS вы обязательно должны использовать & селектор вложенности. Это связано с тем, что браузер автоматически добавляет пробелы между селекторами, не использующими & селектор вложенности.

Для выбора элемента с class="a b" необходим & селектор вложенности, в противном случае пробелы нарушат составной селектор.

.a {
  /* styles for element with class="a" */
  .b {
    /* styles for element with class="b" which is a descendant of class="a" */
  }
  &.b {
    /* styles for element with class="a b" */
  }
}

/* the browser parses this as */
.a {
  /* styles for element with class="a" */
}
.a .b {
  /* styles for element with class="b" which is a descendant of class="a" */
}
.a.b {
  /* styles for element with class="a b" */
}

Пример

Вложенность и составные селекторы

В этом примере & селектор вложенности используется для создания составных селекторов для стилизации элементов с несколькими классами.

HTML

<div class="notices">
  <div class="notice">
    <h2 class="notice-heading">Notice</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
  <div class="notice warning">
    <h2 class="warning-heading">Warning</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
  <div class="notice success">
    <h2 class="success-heading">Success</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </div>
</div>

CSS

Стили для .notices для создания колонки с использованием свойств flexbox.

.notices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 90%;
  margin: auto;
}

В приведенном ниже коде CSS используется вложенность для создания составных селекторов как с использованием, так и без &. Селектор верхнего уровня определяет основные стили для элементов с class="notice". Затем & селектор вложенности используется для создания составных селекторов для элементов с классом class="notice warning" или class="notice success". Кроме того, использование вложенности для создания составных селекторов без явного использования & видно в селекторе .notice .notice-heading::before.

.notice {
  width: 90%;
  justify-content: center;
  border-radius: 1rem;
  border: black solid 2px;
  background-color: #ffc107;
  color: black;
  padding: 1rem;
  .notice-heading::before {
    /* equivalent to `.notice .notice-heading::before` */
    content: "ℹ︎ ";
  }
  &.warning {
    /* equivalent to `.notice.warning` */
    background-color: #d81b60;
    border-color: #d81b60;
    color: white;
    .warning-heading::before {
      /* equivalent to `.notice.warning .warning-heading::before` */
      content: "! ";
    }
  }
  &.success {
    /* equivalent to `.notice.success` */
    background-color: #004d40;
    border-color: #004d40;
    color: white;
    .success-heading::before {
      /* equivalent to `.notice.success .success-heading::before` */
      content: "✓ ";
    }
  }
}

Результат

Присоединённый селектор вложенности

& селектор вложенности также можно добавить к вложенному селектору, что приводит к изменению контекста.

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

<div>
  <span class="foo">text</span>
</div>

В отличие от:

<div class="bar">
  <span class="foo">text</span>
</div>

.foo {
  /* .foo styles */
  .bar & {
    /* .bar .foo styles */
  }
}

Пример

Добавление селектора вложенности

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

HTML

<div class="wrapper">
  <article class="card">
    <h2>Card 1</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </article>
  <article class="card featured">
    <h2>Card 2</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </article>
  <article class="card">
    <h2>Card 3</h2>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
  </article>
</div>

CSS

.wrapper {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
  font-family: system-ui;
}

В следующем CSS мы создаем стили для .card и .card h2. Затем, в блоке стилей h2, мы вкладываем класс .featured с добавленным & селектором вложенности, что создает стили для .card :is(.featured h2), что эквивалентно :is(.card h2):is(.featured h2).

.card {
  padding: 0.5rem;
  border: 1px solid black;
  border-radius: 0.5rem;
  & h2 {
    /* equivalent to `.card h2` */
    color: slateblue;
    .featured & {
      /* equivalent to `:is(.card h2):is(.featured h2)` */
      color: tomato;
    }
  }
}

Результат

Правило вложенных деклараций

Правило вложенных деклараций состоит в том, что правила CSS анализируются в порядке их записи в документе CSS.

С следующим CSS:

.foo {
  background-color: silver;
  @media (screen) {
    color: tomato;
  }
  color: black;
}

Правило background-color анализируется первым и устанавливает цвет в серебряный, затем обрабатывается правило @media, и, наконец, правило color.

Парсер CSSOM анализирует CSS следующим образом:

↳ CSSStyleRule
  .style
    - background-color: silver
  ↳ CSSMediaRule
    ↳ CSSNestedDeclarations
      .style (CSSStyleDeclaration, 1) =
      - color: tomato
  ↳ CSSNestedDeclarations
    .style (CSSStyleDeclaration, 1) =
      - color: black

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

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

Конкатенация (невозможна)

В препроцессорах CSS, таких как Sass, можно использовать вложенность для объединения строк и создания новых классов. Это распространено в методологиях CSS, таких как BEM.

.component {
  &__child-element {
  }
}
/* In Sass this becomes */
.component__child-element {
}

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

В составных селекторах селектор типа должен стоять первым. Запись &Element (селектор типа) делает селектор CSS, а весь блок селектора, недействительным. Поскольку селектор типа должен стоять первым, составной селектор должен быть записан как Element&.

.my-class {
  element& {
  }
}

/* the browser parses this to become a compound selector */
.my-class {
}
element.my-class {
}

Недействительные вложенные правила стиля

Если вложенное правило CSS недействительно, все заключенные стили будут проигнорированы. Это не повлияет на родительские или предыдущие правила.

В следующем примере есть недействительный селектор (% не является допустимым символом для селекторов). Правило, которое включает этот селектор, игнорируется, но последующие допустимые правила не игнорируются.

.parent {
  /* .parent styles these work fine */
  & %invalid {
    /* %invalid styles all of which are ignored */
  }
  & .valid {
    /* .parent .valid styles these work fine */
  }
}

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting