Css – Sifr3 – Is it possible to override CSS styling with parent selector

csssifr

I would like to override setting that already defined with selecting
parent selector but I don't know how.
Say, there are 2 pages on a website like the following…

-Home page-
<body><h1 class="sifr">Home</h1></body>

-About page-
<body class="about"><h1 class="sifr">About</h1></body>

then, I have these in sirf-config.js…

sIFR.replace(fontname, {
selector: 'h1.sifr',
css: '.sIFR-root { color: #666666; font-size:29px; }'
});

sIFR.replace(fontname, {
selector: 'body.about h1.sifr',
css: '.sIFR-root { color: #FFFFFF; font-size:29px; }'
});

but it doesn't work…

If anybody help me I would appreciate.

Best Answer

Run the replacements for body.about h1.sifr before h1.sifr. sIFR doesn't calculate specificity but executes the replacements in-order. Replacing h1.sifr replaces all such elements, so body.about h1.sifr only finds elements that have already been replaced.

Related Solutions

Css – Is it possible to include one CSS file in another

Yes:

@import url("base.css");

Note:

The @import rule must precede all other rules (except @charset).
Additional @import statements require additional server requests. As an alternative, concatenate all CSS into one file to avoid multiple HTTP requests. For example, copy the contents of base.css and special.css into base-special.css and reference only base-special.css.

Css – CSS parent selector

There is currently no way to select the parent of an element in CSS.

If there was a way to do it, it would be in either of the current CSS selectors specs:

That said, the Selectors Level 4 Working Draft includes a :has() pseudo-class that will provide this capability. It will be similar to the jQuery implementation.

li:has(> a.active) { /* styles to apply to the li tag */ }

However, as of 2021, this is still not supported by any browser.

In the meantime, you'll have to resort to JavaScript if you need to select a parent element.

Best Answer

Related Solutions

Css – Is it possible to include one CSS file in another

Css – CSS parent selector

Related Topic