How to use CSS inheritance with multiple CSS files?

Question

I'm using AdminLTE as my base for styling. There is a class called .sidebar-dark-primary.

In a page I have:

<aside class="main-sidebar sidebar-dark-primary elevation-4">
</aside>

Now I have a separate CSS file that is loaded after all other files and only if a condition is met.

I need to change the page to be something like:

<aside class="main-sidebar sidebar-custom elevation-4">
</aside>

And sidebar-custom comes from the separate file.

How do I inherit sidebar-custom from sidebar-dark-primary in one file or to sidebar-light-primary in another file?

CSS doesn't have such a feature.

connexo
– connexo

2022-07-26 11:56:31 +00:00
Commented Jul 26, 2022 at 11:56 — connexo
– connexo, Commented Jul 26, 2022 at 11:56

Quentin · Accepted Answer · 2022-07-26 11:30:22Z

1

You can't. CSS has no feature which lets you write a rule which imports rules from a different ruleset. Nor does it have any feature which changes which classes apply to an element.

In CSS, inheritance means "Take the value of a property from the parent element".

In this example one of the links inherits the font colour from the parent div, while the other doesn't (so has the default link colour the browser applies).

#parent {
  color: green;
}

#inherits {
  color: inherit;
}

<div id="parent">
  <a id="inherits" href="/">
        some text
  </a>
  <br>
  <a id="does-not-inherit" href="/">
        some other text
  </a>
</div>

answered Jul 26, 2022 at 11:30

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ivan-Mark Debono Over a year ago

Could inheritance be achieved using SASS?

Quentin Over a year ago

sass-lang.com/documentation/at-rules/extend

Peter Pointer · Accepted Answer · 2022-07-26 11:52:06Z

Using CSS Specificity

Some frontend and CSS frameworks also have a smilar idea. This cannot be solved by simply replacing the class.

You can achieve it by having both classes in the element. This is not really inheritance, but specificity:
MDN: CSS Specificity

See snippet below to illustrate this.

/* main file */

* { margin: 0; padding: 0; }
aside { display: block; color: #999; } /* just for this snippet */
.sidebar { padding: 5px; margin: 10px; border: 2px solid blue; }
.sidebar-dark { background-color: #222; }
.sidebar-dark-primary { background-color: #226; }


/* separate file with customizations */

.sidebar-custom { background-color: #636; border-color: green; }

<html>
<body>

<aside class="main-sidebar sidebar elevation-4">
Sidebar
</aside>

<aside class="main-sidebar sidebar sidebar-dark elevation-4">
Sidebar: Dark
</aside>

<aside class="main-sidebar sidebar sidebar-dark-primary elevation-4">
Sidebar: Dark Primary
</aside>

<aside class="main-sidebar sidebar sidebar-dark-primary sidebar-custom elevation-4">
Sidebar: Dark Primary Custom
</aside>

</body>
</html>

Collectives™ on Stack Overflow

How to use CSS inheritance with multiple CSS files?

2 Answers 2

2 Comments

Using CSS Specificity

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Using CSS Specificity

Comments

Your Answer

Sign up or log in

Post as a guest

Related