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, Jan 11 '14 at 06:39

score 2 · Accepted Answer · answered Jan 11 '14 at 06:05

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 '14 at 06:05

Josh Crozier

233,099
56
391
304

Can you provide an example using my custom class .sibsi because I don't see how your example applies. – Johann Jan 11 '14 at 06:06
1

@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 Jan 11 '14 at 06:09
1

And if you want real inheritance than look at LESS or SCSS instead – Mr. Alien Jan 11 '14 at 06:10
1

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. – Jukka K. Korpela Jan 11 '14 at 06:36

Fillip Peyton · Answer 2 · 2014-01-11T06:14:36.043

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.

score 1 · Answer 3 · answered Jan 11 '14 at 06:10

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.

Inheriting from an existing css class

3 Answers3