Suppose I have the following foo class
HTML:
<div class="foo">..</div>
CSS:
.foo{
..some styles here...
}
Now I want to add a div with class bar that uses foo's styling:
<div class="bar foo">..</div>
But this involves changing the HTML. Is there a way to inherit the styling of another class without changing the HTML?
Something like:
<div class="bar">..</div>
.bar{
inherit: .foo;
}
You can do this:
.foo, .bar
{
/* rules that two classes have in common */
}
.foo
{
/* rules that apply to the foo class only */
}
.bar
{
/* rules that apply to the bar class only */
}
By applying LESS, you can mix in declarations like this:
/* LESS */
.foo {
/* some style here */
}
.bar {
.foo;
}
Note here if you want to hide ruleset .foo (probably a ruleset only for inheritance use) from the CSS output, you can modify the code above a little:
/* LESS */
.foo() { /* It's called "parametric mixin" */
/* some style here */
}
.bar {
.foo;
}
By using LESS (or SASS/Stylus if you like) you can decouple styles and class names in your HTML code while keeping style rulesets reusable:
<!-- no need to use style-related class name here -->
<h2 class="post-title">...</h2>
/* LESS */
/* reusable style ruleset */
.bold-title() {
font-weight: bold;
font-family: Impact, sans-serif;
}
/* actually use those rulesets */
.post-title {
.bold-title;
}
And after compilation you will get neat CSS code like this:
/* CSS */
.post-title {
font-weight: bold;
font-family: Impact, sans-serif;
}
Unfortunately, there is no selector that allows inheritance of CSS properties. If you do not want to directly change your HTML code, you could add a small JavaScript command like so:
var x = document.getElementsByClassName("foo");
for (i=0;i<x.length;i++){x[i].setAttribute("class","foo bar");}
(This will change all of the foo class divs into foo bar class divs. If you want to change specific divs, use this command: document.getElementsByClassName("foo")[n].setAttribute("class","foo bar");, where n is the index of the foo class div.)
Otherwise, without using JavaScript, there is no way to "inherit" the CSS classes, unfortunately.
foo comes from another CSS files, so using a simple solution like Zach's would involve changing other files which might end up in a messy technical debt.there is no inherit option in css. you can add you .bar class aftre the .foo class separated by a comma(,)
.bar, .foo{
..some styles here...
}
