How to reuse class on ID definition?

Question

In the following code, is there a way to use the .center class in the CSS declaration rather than doing a class= in each div? Each div should have a margin:0 auto.

CSS

.center {margin:0 auto;}
#first {width:400px; font-size:10px;}
#second{width:400px;text-align:center;}

HTML

<div class="center" id="first">This is the first line</div>
<div id="second">This is the first line</div>

http://jsfiddle.net/ayK3J/

@ScottSelby Well that would apply to *all* divs, I don't know if OP wants that or only for certain divs... Anyway, what is important is for OP to find what he wants, so you might be right for him ;) — blex, May 19 '14 at 18:04
If the question is about whether it is possible to have each of the latter two rules reference the first one, then the answer is no, and the duplicate can be found here: http://stackoverflow.com/questions/4060405/is-it-possible-to-reference-one-css-selector-or-ruleset-within-another — BoltClock, May 19 '14 at 18:05
Define what you mean by reusing a class. In general, you cannot use a class in CSS without using a class. You can, however, set a `class` attribute on an outer element just once (and use a suitable combined selector) instead of repeating such attributes. — Jukka K. Korpela, May 19 '14 at 18:24

score 8 · Answer 1 · edited May 19 '14 at 18:17

If you want each div to have margin: 0 auto;, then use a simple element selector like

div {
    margin: 0 auto;
}

If you want to center the div having IDs ONLY, then use element[attr] selector like

div[id] {
    margin: 0 auto;
}

But beware before using these; they are too general, and will lead to inconsistent results if your layout gets broader, so it's better to wrap an element around these div elements you want to apply margin: 0 auto; on and assign an ID to that(say, #wrapper) and than use a selector like

#wrapper > div {
    margin: 0 auto;
}

Or, using

#wrapper {
    margin: 0 auto;
}

should suffice as well...

Don't want to use a wrapper element? Modify your IDs like #center-first, #center-second and so on, then you can use element[attr=val] selector like

div[id^=center-] {
    margin: 0 auto;
}

The above selector matches ANY IDS which start with a word center followed by a -

Demo

I think what he asks for is a way to call the `.center` rule with all its declarations inside other rules. like SASS' `@extend` directive: `div { @extend .center }` — agrm, May 19 '14 at 18:07
@AndersG Well, SASS isn't tagged so I gave the best I could with CSS only :) — Mr. Alien, May 19 '14 at 18:09

score 0 · Answer 2 · answered May 19 '14 at 18:11

0

What about this?

#first,
#second {
  margin: 0 auto;
}

answered May 19 '14 at 18:11

andyngo

31
5

How to reuse class on ID definition?

2 Answers2