CSS class inherit from anther class

Question

My question is simple, but I didn't found any documentation about it on Internet. Maybe I didn't search with the right keywords...

Take the example of a CSS class called centered, it centers elements and do some other stuff.

I want to say that all the element of the class news, for example, inherit from centered.

There is several solutions :

Declare all the elements of centered in news

.centered { X; Y; Z } .news { X; Y; Z; A; B }
Declare in HTML my tags with the 2 classes :

.centered { X; Y; Z } .news { A; B }

<div class="news centered">...</div>

I search a code for doing something like this :

.centered { X; Y; Z }
.news { all_the_properties_of_centered; A; B }

then I would declare my news with

<div class="news">...</div>

Is it possible ?

AFAIK you'll need to use a framework like [LESS](http://lesscss.org/) or [SASS](http://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass) to do inheritance. — StuartLC, May 16 '13 at 10:08
It's one of the major feature of the preprocessor like sass or less. Css can't do that as far as i know — Xavier, May 16 '13 at 10:08

score 1 · Answer 1 · answered May 16 '13 at 10:09

1

you should take a look at LESS CSS (or SASS) which both can do exactly what you want - and offer a lot of other great possibilitys.

answered May 16 '13 at 10:09

oezi

51,017
10
98
115

score 1 · Answer 2 · answered May 16 '13 at 10:09

1

Simplest way would be

.centered, .news { X; Y; Z }
.news { A; B }

answered May 16 '13 at 10:09

Hanky Panky

46,730
8
72
95

Jan Turoň · Answer 3 · 2013-05-16T10:20:23.980

1

No. CSS doesn't have anything like extend. However, you can write it this way

.centered, .news { X; Y; Z }
.news { A; B } /* adding rules */

Well, actually it does contain inherit, but it doesn't mean to inherit from another CSS class, but from default element style, see Hanky Panky's comment.

edited May 16 '13 at 10:20

answered May 16 '13 at 10:10

Jan Turoň

31,451
23
125
169

score 0 · Answer 4 · answered May 16 '13 at 10:33

0

I suggest to use Emmet, which was previously known as Zen coding for such combinations. It is fast and very productive if constructed logically.

answered May 16 '13 at 10:33

Nitesh

15,425
4
48
60

CSS class inherit from anther class

4 Answers4