Custom css without preceding class-CodePudding

How would I do the following (convert my idea into something that works)?

(I know @media is limited to screen, all etc.)

I want to have 1! .css file and have multiple definitions for html ... ->

In this example I am defining a css-rule-set (background: red) for the page and I only want it to work when I set the media tag of html. I do not want to go through all css and set a special .special_only_this_site .classXthat_already_was_here for each and every tag ...

<html media="frontpage">
 <body> ... ... </body
</html>

and then address it as ?

/* this css is only for html with media tag frontpage */
@media only frontpage {
    html {
        background: red;
    }
}

CodePudding user response：

I don't think it's possible with vanilla CSS.

But that's what SCSS is for. There you could just do this:

.frontpage {
  body {
    background: red;
  }
  a {
    color: blue;
  }
}

<html >
   <body> ... ... </body
</html>

which compiles to:

.frontpage body {
  background: red;
}
.frontpage a {
  color: blue;
}

CodePudding user response：

If you are willing/able to add a single, differant class to the html/body tag of each seperate page/site then you can just use css custom properties.

Simply create a new class and apply overwriting variables to that class. You can create as many themes as you wish and will only have to change the variables within the class at the top of your master stylesheet.

/*Default Theme*/
:root {
  --colorBackground: #ffffff;
  --colorPrimary: #000;
}


/*Theme 2*/
.frontpage {
  --colorBackground: red;
  --colorPrimary: #fff;
}

body {
  background: var(--colorBackground);
}

h1,
h2,
h3 {
  color: var(--colorPrimary);
}

<body >
  <h1>Custom theme</h1>
</body>