Как и возможно ли прописать модификатор в css nesting?

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

Первый способ - использовать комбинаторы наряду с псевдоклассами. Например, если у вас есть HTML-структура вида:

<div class="block">
  <p class="block__text">Some text</p>
</div>

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

.block p.block__text {
  /* стили для обычного текста */
}

.block p.block__text:first-child:not(.modifier) {
  /* стили для текста без модификатора */
}

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

const textElem = document.querySelector('.block__text');
if (textElem.classList.contains('modifier')) {
  textElem.parentNode.classList.add('block--modifier');
}

После добавления этого класса вы можете прописать стили для блока с модификатором в CSS следующим образом:

.block.block--modifier {
  /* стили для блока с модификатором */
}

Третий способ - использовать препроцессоры CSS, такие как Sass или Less, которые предоставляют возможность использовать переменные и миксины для дополнительной функциональности. С помощью этих инструментов можно создать переменные для модификаторов и применять их во вложенных селекторах. Например, с Sass можно сделать следующее:

$modifier-class: '.modifier';

.block {
  &__text {
    /* стили для обычного текста */
  }

  &:not(#{$modifier-class}) &__text {
    /* стили для текста без модификатора */
  }
}

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