Can a CSS class inherit one or more other classes

Question

I feel dumb for having been a web programmer for so long and not knowing the answer to this question  I actually hope it s possible and I just didn t know about rather than what I think is the answer  which is that it s not possible    My question is whether it is 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

User · Answer

You can achieve what you want if you preprocess your .css files through php. ...

$something='color:red;'
$else='display:inline;';
echo '.something {'. $something .'}';
echo '.else {'. $something .'}';
echo '.somethingelse {'. $something  .$else '}';

...

User · Answer

If you want a more powerful text preprocessor than LESS  check out PPWizard   http   dennisbareis com ppwizard htm  Warning the website is truly hideous and there s a small learning curve  but it s perfect for building both CSS and HTML code via macros  I ve never understood why more web coders don t use it

User · Answer

In Css file   p Title      font-family  Arial    font-size  16px     p SubTitle p Title      font-size  12px

User · Answer

Don t forget    div something else           will only style a div with both  not just one or the other

User · Answer

Don t think of css classes as object oriented classes  think of them as merely a tool among other selectors to specify which attribute classes an html element is styled by   Think of everything between the braces as the attribute class  and selectors on the left-hand side tell the elements they select to inherit attributes from the attribute class   Example    foo   bar   font-weight   bold  font-size   2em     attribute class A      foo   color   green     attribute class B       When an element is given the attribute class  foo   it is useful to think of it not as inheriting attributes from class  foo  but from attribute class A and attribute class B   I e   the inheritance graph is one level deep  with elements deriving from attribute classes  and the selectors specifying where the edges go  and determining precedence when there are competing attributes  similar to method resolution order      The practical implication for programming is this   Say you have the style sheet given above  and want to add a new class  baz  where it should have the same font-size as  foo   The naive solution would be this    foo   bar   font-weight   bold  font-size   2em     attribute class A      foo   color   green     attribute class B      baz   font-size   2em     attribute class C  hidden dependency          Any time I have to type something twice I get so mad   Not only do I have to write it twice  now I have no way of programatically indicating that  foo and  baz should have the same font-size  and I ve created a hidden dependency   My above paradigm would suggest that I should abstract out the font-size attribute from attribute class A    foo   bar   baz   font-size   2em     attribute base class for A      foo   bar   font-weight   bold     attribute class A      foo   color   green     attribute class B         The main complaint here is that now I have to retype every selector from attribute class A again to specify that the elements they should select should also inherit attributes from attribute base class A   Still  the alternatives are to have to remember to edit every attribute class where there are hidden dependencies each time something changes  or to use a third party tool   The first option makes god laugh  the second makes me want to kill myself

User · Answer

That s not possible in CSS    The only thing supported in CSS is being more specific than another rule   span   display inline   span myclass   background  red     A span with class  myclass  will have both properties   Another way is by specifying two classes    lt div class  something else  gt     lt  div gt    The style of  else  will override  or add  the style of  something

User · Answer

In specific circumstances you can do a  soft  inheritance    composite   display inherit  background inherit      something   display inline    else        background red     This only works if you are adding the  composite class to a child element  It is  soft  inheritance because any values not specified in  composite are not inherited obviously  Keep in mind it would still be less characters to simply write  inline  and  red  instead of  inherit    Here is a list of properties and whether or not they do this automatically  https   www w3 org TR CSS21 propidx html

User · Answer

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

User · Answer

CSS doesn t really do what you re asking  If you want to write rules with that composite idea in mind  you may want to check out compass  It s a stylesheet framework which looks similar to the already mentioned Less   It lets you do mixins and all that good business

User · Answer

Actually what you re asking for exists - however it s done as add-on modules   Check out this question on Better CSS in  NET for examples   Check out Larsenal s answer on using LESS to get an idea of what these add-ons do

User · Answer

You can use the converse approach to achieve the same result - start from the composite and then remove styling using the unset keyword  For example  if you start with the following sample composition   composite       color  red      margin-left  50px      background-color  green    you can then increase selector specificity to selectively remove styles using unset   composite no-color       color  unset     composite no-margin-left       margin-left  unset     composite no-background-color       background-color  unset    Here is a JSFiddle demonstrating this approach  One benefit of this approach is that because the specificity of the compound selectors is higher than the composite itself  you do not need all of the combinations of classes to achieve the desired results for multiple combinations     Multi-unset compound selector combinations  such as the one that follows  ARE NOT NECESSARY because of the higher specificity of each individual compound selectors listed above  This keeps things simple      composite no-background-color no-color no-margin-left       background-color  unset      color  unset      margin-left  unset    Furthermore  at 96  support for the unset keyword  browser coverage is excellent

User · Answer

I was looking for that like crazy too and I just figured it out by trying different things  P    Well you can do it like that   composite something  composite else       blblalba     It suddenly worked for me

User · Answer

As others have said  you can add multiple classes to an element   But that s not really the point  I get your question about inheritance  The real point is that inheritance in CSS is done not through classes  but through element hierarchies  So to model inherited traits you need to apply them to different levels of elements in the DOM

User · Answer

Yes  but not exactly with that syntax    composite   something   display inline     composite   else        background red

User · Answer

I ran into this same problem and ended up using a JQuery solution to make it seem like a class  can inherit other classes    lt script gt        function                    composite   addClass  something else                 lt  script gt    This will find all elements with the class  composite  and add the classes  something  and  else  to the elements  So something like  lt div class  composite  gt     lt  div gt  will end up like so   lt div class  composite something else  gt     lt  div gt

User · Answer

Perfect timing  I went from this question to my email  to find an article about Less  a Ruby library that among other things does this   Since super looks just like footer  but with a different font  I ll use Less s class inclusion technique  they call it a mixin  to tell it to include these declarations too    super      footer    font-family  cursive

User · Answer

You can do is this CSS  car     font-weight  bold     benz     background-color  blue     toyota     background-color  white     HTML  lt div class  quot car benz quot  gt     lt p gt I m bold and blue  lt  p gt   lt  div gt   lt div class  quot car toyota quot  gt     lt p gt I m bold and white  lt  p gt   lt  div gt

User · Answer

No you can t do something like   composite        something      else     This are no  class  names in the OO sense   something and  else are just selectors nothing more   But you can either specify two classes on an element   lt div class  something else  gt     lt  div gt    or you might look into another form of inheritance    foo     background-color  white    color  black      bar     background-color  inherit    color  inherit    font-weight  normal         lt div class  foo  gt     lt p class  bar  gt Hello  world lt  p gt   lt  div gt    Where the paragraphs backgroundcolor and color are inherited from the settings in the enclosing div which is  foo styled  You might have to check the exact W3C specification  inherit is default for most properties anyway but not for all

User · Answer

I realize this question is now very old but  here goes nothin   If the intent is to add a single class that implies the properties of multiple classes  as a native solution  I would recommend using JavaScript jQuery  jQuery is really not necessary but certainly useful   If you have  for instance  umbrellaClass that  inherits  from  baseClass1 and  baseClass2 you could have some JavaScript that fires on ready       umbrellaClass   addClass  baseClass1        umbrellaClass   addClass  baseClass2      Now all elements of  umbrellaClass will have all the properties of both  baseClasss  Note that  like OOP inheritance   umbrellaClass may or may not have its own properties   The only caveat here is to consider whether there are elements being dynamically created that won t exist when this code fires  but there are simple ways around that as well   Sucks css doesn t have native inheritance  though

User · Answer

Have a look at CSS compose  https   bambielli com til 2017-08-11-css-modules-composes   according to them    serif-font       font-family  Georgia  serif      display       composes  serif-font      font-size  30px      line-height  35px      I use it in my react project

User · Answer

I think this one is a better solution    class     button-            base button properties       button-primary          button-plain

User · Answer

For those who are not satisfied with the mentioned  excellent  posts  you can use your programming skills to make a variable  PHP or whichever  and have it store the multiple class names   That s the best hack I could come up with    lt style gt   red   color  red     bold   font-weight  bold     lt  style gt    lt   define  DANGERTEXT   red bold      gt    Then apply the global variable to the element you desire rather than the class names themselves   lt span class   lt   DANGERTEXT  gt   gt  Le Champion est Ici  lt  span gt

User · Answer

Unfortunately  CSS does not provide  inheritance  in the way that programming languages like C    C  or Java do  You can t declare a CSS class an then extend it with another CSS class   However  you can apply more than a single class to an tag in your markup     in which case there is a sophisticated set of rules that determine which actual styles will get applied by the browser     lt span class  styleA styleB  gt       lt  span gt    CSS will look for all the styles that can be applied based on what your markup  and combine the CSS styles from those multiple rules together   Typically  the styles are merged  but when conflicts arise  the later declared style will generally win  unless the  important attribute is specified on one of the styles  in which case that wins   Also  styles applied directly to an HTML element take precedence over CSS class styles

User · Answer

Less and Sass are CSS pre-processors which extend CSS language in valuable ways  Just one of many improvements they offer is just the option you re looking for  There are some very good answers with Less and I will add Sass solution   Sass has extend option which allows one class to be fully extended to another one  More about extend you can read in this article

User · Answer

An element can take multiple classes    classOne   font-weight  bold     classTwo   font-famiy   verdana      lt div class  classOne classTwo  gt     lt p gt I m bold and verdana  lt  p gt   lt  div gt    And that s about as close as you re going to get unfortunately  I d love to see this feature  along with class-aliases someday

User · Answer

While direct inheritance isn t possible   It is possible to use a class  or id  for a parent tag and then use CSS combinators to alter child tag behaviour from it s heirarchy    x000D   x000D  p test background-color rgba 55 55 55 0 1    x000D  p test  gt  span background-color rgba 55 55 55 0 1    x000D  p test  gt  span  gt  span background-color rgba 55 55 55 0 1    x000D  p test  gt  span  gt  span  gt  span background-color rgba 55 55 55 0 1    x000D  p test  gt  span  gt  span  gt  span  gt  span background-color rgba 55 55 55 0 1    x000D  p test  gt  span  gt  span  gt  span  gt  span  gt  span background-color rgba 55 55 55 0 1    x000D  p test  gt  span  gt  span  gt  span  gt  span  gt  span  gt  span background-color rgba 55 55 55 0 1    x000D  p test  gt  span  gt  span  gt  span  gt  span  gt  span  gt  span  gt  span background-color rgba 55 55 55 0 1    x000D  p test  gt  span  gt  span  gt  span  gt  span  gt  span  gt  span  gt  span  gt  span background-color rgba 55 55 55 0 1    x000D   lt p class  test  gt  lt span gt One  lt span gt possible  lt span gt solution  lt span gt is  lt span gt using  lt span gt multiple  lt span gt nested  lt span gt tags lt  span gt  lt  span gt  lt  span gt  lt  span gt  lt  span gt  lt  span gt  lt  span gt  lt  span gt  lt  p gt  x000D   x000D   x000D    I wouldn t suggest using so many spans like the example  however it s just a proof of concept   There are still many bugs that can arise when trying to apply CSS in this manner    For example altering text-decoration types

User · Answer

The SCSS way for the given example  would be something like    something     display  inline    else     background  red     composite      extend  something     extend  else      More info  check the sass basics

User · Answer

Keep your common attributes together and assign specific  or override  attributes again       ------------------------------------------------------------------------------           Headings         ------------------------------------------------------------------------------       h1  h2  h3  h4       font-family           myfind-bold      color                  4C4C4C      display inline-block      width 900px      text-align left      background-image  linear-gradient 0     F4F4F4   FEFEFE     IE6  amp  IE7       h1         font-size             300       padding               45px 40px 45px 0px     h2       font-size             200       padding               30px 25px 30px 0px

User · Answer

You can add multiple classes to a single DOM element  e g    lt div class  firstClass secondClass thirdclass fourthclass  gt  lt  div gt    Rules given in later classes  or which are more specific  override  So the fourthclass in that example kind of prevails   Inheritance is not part of the CSS standard

[css] Can a CSS class inherit one or more other classes?

Examples related to css