Изменение: корневые переменные на разных страницах с классом

Можно ли использовать :root селектор с идентификатором или классом? Я пытаюсь перевернуть цвета на другой странице.

:root {
  --color-one: red;
  --color-two: blue;
}

/* Can something like this happen? */
.posts:root {
  --color-one: green;
  --color-two: yellow;
}

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

Ура!

Источник

2 ответа

Синтаксис может немного отличаться от того, что у вас есть, но вы можете, это сила CSS!

Вы можете переопределить переменные css в любом классе. Вам не нужно:root для переопределений, и если ваши переопределенные значения должны влиять на всю страницу, добавьте этот класс в тег body.

:root {
  --color-one: red;
  --color-two: blue;
}

/* Overrides settings in :root */
.posts {
  --color-one: green;
  --color-two: yellow;
}



p {
  color: var(--color-one);
  background-color: var(--color-two);
}
<p>
Test
</p>
<p>
Test
</p>

<div class="posts">
<!-- just add this class to the body tag on your other page -->
<p>
Test
</p><p>
Test
</p>
</div>

Источник

Синтаксис будет:

:root.post {
    /* cSS declarations */
}

Вы можете иметь ту же таблицу стилей на 2 страницах, а затем применить posts класс для элемента HTML.

:root {
  --color-one: yellow;
  --color-two: green;
  background-color: var(--color-one);
  color: var(--color-two);
}

:root.posts {
  --color-one: green;
  --color-two: yellow;
  background-color: var(--color-one);
  color: var(--color-two);
}

Страница 1: зеленый текст на желтом фоне

Обновлено с потомком ребенка

:root {
  --color-one: yellow;
  --color-two: green;
  background-color: var(--color-one);
  color: var(--color-two);
}

:root.posts {
  --color-one: green;
  --color-two: yellow;
  background-color: var(--color-one);
  color: var(--color-two);
}

.special {
  color: #f0f;
  font-style: italic;
}

:root.posts .special {
  color: #f90;
  font-style: normal;
  text-transform: uppercase;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}
<html>
  <head>
  </head>
  <body>
    <p>
      ghjkghjkg
    </p>
    <p class="special">Special content</p>
  </body>
</html>

Страница 2: желтый текст на зеленом фоне

Обновлено с потомком ребенка

:root {
  --color-one: yellow;
  --color-two: green;
  background-color: var(--color-one);
  color: var(--color-two);
}

:root.posts {
  --color-one: green;
  --color-two: yellow;
  background-color: var(--color-one);
  color: var(--color-two);
}

.special {
  color: #f0f;
  font-style: italic;
}

:root.posts .special {
  color: #f90;
  font-style: normal;
  text-transform: uppercase;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}
<html class="posts">
  <head>
  </head>
  <body>
    <p>
      ghjkghjkg
    </p>
    <p class="special">Special content</p>
  </body>
</html>

Источник
Другие вопросы по тегам