Inheriting from an existing css class

Question

I have a css class as follows:

.sibsi
{
  background-color: #008FFF;
  padding: 5px;
  cursor: pointer;
  color: #ffffff;
}

How do you create a new class that inherits everything from the class .sibsi but where I can override individual css properties? In other words, I want to have all the properties of sibsi but change just the background-color.

The only thing I've found is this: https://stackoverflow.com/a/5417412/753632

but that essentially means specifying all the classes in places where the classes are used.

The question is based on misunderstanding of CSS inheritance (and classes) and therefore asks for something impossible, without describing a tractable problem. — Jukka K. Korpela
– Jukka K. Korpela, Commented Jan 11, 2014 at 6:39

Josh Crozier · Accepted Answer · 2014-01-11 06:05:14Z

2

I would suggest applying the styling to both elements initially:

.sibling, h1 {
  background-color: #008FFF;
  padding: 5px;
  cursor: pointer;
  color: #ffffff;
}

Then explicitly overwriting the background on the other element:

h1 {
  background:black;
}

Example here

answered Jan 11, 2014 at 6:05

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

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

4 Comments

Johann Over a year ago

Can you provide an example using my custom class .sibsi because I don't see how your example applies.

Mr. Alien Over a year ago

@AndroidDev Actually this doesn't really inherit, the comma means apply all the properties to both the selectors, and than you write the specific selector with the properties you want to override, in other words, they share common properties and unique once are re declared.. and anyways this is correct so a vote from me...

Mr. Alien Over a year ago

And if you want real inheritance than look at LESS or SCSS instead

Jukka K. Korpela Over a year ago

This does not create any new class, which was the (impossible) requirement in the question. So if this is an accepted answer, the intended question was not what was asked.

chairbender · Accepted Answer · 2014-01-11 06:10:44Z

1

You cannot accomplish what you are trying to do with plain CSS. If you want the functionality you are looking for, you should look into using SASS, a CSS meta language. It has a keyword called "@extend" which I think accomplishes what you are looking for.

answered Jan 11, 2014 at 6:10

chairbender

8496 silver badges14 bronze badges

Comments

Fillip Peyton · Accepted Answer · 2014-01-11 06:14:36Z

1

In CSS, you don't inherit properties like objects in an object oriented language do. You may be thinking of the inherit property value, which allows certain properties to be inherited. But the way this inheritance works is between an element and its parent (and its parent and its parent and so on...).

Per MDN:

The summary of every CSS property definition says whether that property is inherited by default ("Inherited: Yes") or not inherited by default ("Inherited: no"). This controls what happens when no value is specified for a property on an element.

A good point was made in a previous comment. If you are looking to have true inheritance, both Sass and LESS provide an extend method to truly extend a class's styles.

edited Jan 11, 2014 at 6:14

answered Jan 11, 2014 at 6:09

Fillip Peyton

3,6674 gold badges36 silver badges61 bronze badges

Collectives™ on Stack Overflow

Inheriting from an existing css class

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related