Menu
Is it possible to make a CSS class that "inherits" from another CSS class (or more than one).
For example, say we had:
.something { display:inline } .else { background:red } What I'd like to do is something like this:
.composite { .something; .else } where the ".composite" class would both display inline and have a red background
362
An element is usually only assigned one class. The corresponding CSS for that particular class defines the appearance properties for that class. However, we can also assign multiple classes to the same element in CSS. In some cases, assigning multiple classes makes page styling easier and much more flexible.
The inherit CSS keyword causes the element to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand property all . For inherited properties, this reinforces the default behavior, and is only needed to override another rule.
When you group CSS selectors, you apply the same styles to several different elements without repeating the styles in your stylesheet. Instead of having two, three, or more CSS rules that do the same thing (set the color of something to red, for example), you use a single CSS rule that accomplishes the same thing.
There are tools like LESS, which allow you to compose CSS at a higher level of abstraction similar to what you describe.
Less calls these "Mixins"
Instead of
/* CSS */ #header { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #footer { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } You could say
/* LESS */ .rounded_corners { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; } #header { .rounded_corners; } #footer { .rounded_corners; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
