Inherit CSS class

Question

I have one base   base   in my  CSS file with couple properties  I want to change only color and other properties to stay same  How to inherit this base class inother classes

User · Answer

CSS  classes  are not OOP  classes   The inheritance works the other way around  A DOM element can have many classes  either directly or inherited or otherwise associated  which will all be applied in order  overriding earlier defined properties    lt div class  foo bar  gt     foo       color  blue      width  200px      bar       color  red      The div will be 200px wide and have the color red   You override properties of DOM elements with different classes  not properties of CSS classes  CSS  classes  are rulesets  the same way ids or tags can be used as rulesets   Note that the order in which the classes are applied depends on the precedence and specificity of the selector  which is a complex enough topic in itself

User · Answer

Something like this    base       width 100px     div child       background-color red      color blue      child       background-color yellow      lt div class  base child  gt      hello world  lt  div gt    The background here will be red  as the css selector is more specific  as we ve said it must belong to a div element too   see it in action here  jsFiddle

User · Answer

You could also use the  important feature of css to make qualities you do not want to override in the original class   I am using this on my site to keep some of the essential characteristics of the original class while overriding others    lt div class  foo bar  gt   foo   color  blue  width  200px   important      bar   color  red  width  400px      This will generate a class  foo bar  element that is red and 200px   This is great if you are using the other two classes individually and just want a piece from each class

User · Answer

As others have already mentioned  there is no concept of OOP inheritance in CSS  But  i have always used a work around for this   Let s say i have two buttons  and except the background image URL  all other attributes are common  This is how i did it     button specific attributes    button1       background-image  url     Images button1 gif        button specific attributes    button2       background-image  url     Images button2 gif         These are the shared attributes     button1   button2       cursor  pointer      background-repeat  no-repeat      width  25px      height  20px      border  0      Hope this helps somebody

User · Answer

You don t need to add extra two classes  button button-primary   you just use the child class  button-primary  with css and it will apply parent as well as child css class  Here is the link   CSS-Inheritance  Thanks to Jacob Lichner

User · Answer

You can create another class with the properties you want and add this class to your class attribute    classA     margin  0    text-align  left      classB     background-color  Gray    border  1px solid black      lt div class  classA classB  gt My div lt  div gt

User · Answer

You dont inherit in css  you simply add another class to the element which overrides the values   base        color green       other props     basealt     color red      lt span class  base basealt  gt  lt  span gt

User · Answer

i think you can use more than one class in a tag  for example    lt div class  whatever base  gt  lt  div gt   lt div class  whatever2 base  gt  lt  div gt    so when you want to chage all div s color you can just change the  base     i dont know how to inherit in CSS

User · Answer

As said in previous responses  their is no OOP-like inheritance in CSS  But if you want to reuse a rule-set to apply it to descentants of something  changing properties  and if you can use LESS  try  Mixins  To resume on OOP features  it looks like composition   For instance  you want to apply the  paragraph class which is in a file  text less  to all p children of paragraphsContainer  and redefine the color property from red to black  text less file     paragraph       font  arial      color  red     Do this in an alternativeText less file     import  reference   text less       div paragraphsContainer  gt  p        paragraph      color  black     your html file   lt div id  paragraphsContainer  gt      lt p gt paragraph 1 lt  p gt      lt p gt paragraph 2 lt  p gt      lt p gt paragraph 3 lt  p gt   lt  div gt    Please read this answer about defining same css property multiple times

[css] Inherit CSS class

Examples related to css