Nesting CSS Styles or inheritance

Question

I'm pretty new to using CSS beyond applying directly to each element. I'd like to know how I should be doing this. (simplified from my actual implementation, but relatively the same). Is it possible to inherit styles somehow?

I have 3 div classes defined, each positioning a div in my page. I've left out the css for these, but the style divide my page into 3 sections.

div.left{} 
div.center{}
div.right{}

Now, when a user selects one of the divs, it's then highlighted, so I have css to highlight it.

div.lefthighlighted{}
div.centerhighlighted{}
div.righthighlighted{}

I have to now repeat all the styles from div.left{} to div.lefthighlighted{} and add the styles to highlight, and this has to be done for all three div styles I've defined.

OK, I also have a tags within all three of these divs that I want styled different from all other a tags in my application, but they will be the same for the highlightd divs. This is were things get crazy.

I end up with the following for left, center and right. The worst part of this is that all the a tag styling is the same for left, lefthighlighted, center, centerhighlighted, right and righthighlighted, but I can't figure out how to share all of this.

 div.left a:link {}
 div.left a:visited {}
 div.left a:active {}
 div.left a:hover {}
 div.lefthighlighted a:link{}
 div.lefthighlighted a:visited {}
 div.lefthighlighted a:active {}
 div.lefthighlighted a:hover {}

Keep in mind, I'm simply putting empty braces here, but in my stylesheet, I've got a bunch of styles defined. Is there a way to say

div.left a:link {
  inherit div.right a:link;
  or 
  use div.right a:link;
 }

I'm finding myself copying and pasting all the same styles and only changing the class name or the parent class name.

It doesn't make much sense to define :active before :hover since in most cases the link will only be activated while the mouse is pointing at it (the exception being when it is focused and the user presses enter … not that you have defined :focus). — Quentin
– Quentin, Commented Sep 26, 2011 at 19:33
It seems I had two issues here, one with defining multiple div styles (9 total) whereas now I only need 4 as per the answer given by @:Quentin. The problem I had with defining the multiple a tag styles was solved by the answer given by @:Rob W. I can only mark one answer as correct, so I'm choosing Quentins, but I've upvoted both. Thanks. — Jeff Reddy
– Jeff Reddy, Commented Sep 26, 2011 at 19:36
On further thought (see my comment on Quentin's answer), I would have a class for "column" and a class for "highlighted", but use id="left" for the one-and-only left, center, and right columns. — Stephen P
– Stephen P, Commented Sep 26, 2011 at 20:44

Quentin · Accepted Answer · 2011-09-26 19:26:24Z

4

Give the elements multiple classes.

<div class="left highlighted">

And then just include the changed properties in the div.highlighted rule-set.

answered Sep 26, 2011 at 19:26

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

2 Comments

Jeff Reddy Over a year ago

So my a tag styles would then only need to be applied to the left class. This solves my problem of defining muliple lefthighlighted, righthighlighted, etc...

Stephen P Over a year ago

@Jeff - You could even go for <div class="highlighted left column"> so the things common to left, center, and right don't have to be repeated; they can be defined once in div.column { ... }

Rob W · Accepted Answer · 2011-09-26 19:29:46Z

3

You can group styles by using the , (commas) as a separator. Eg:

div.left a:link, div.right a:link {}

/*Newlines don't matter:*/
div.left a:link,
div.right a:link {}

Note that the following does not work as "expected":

/*Expecting to select all links under div.left or div.right*/
div.left, div.right a:link {/*FAIL*/}

Another note about inheritance. Elements inherit styles from their parents. When a new matching selector is encountered, the styles from the parent still apply, unless defined otherwise:

a:link, a:visited, a:active {
    color: red;
    font-size: 16px;
}
a:hover{
    font-size: 20px; /*font-size changed, while the color is still red.*/
}

edited Sep 26, 2011 at 19:29

answered Sep 26, 2011 at 19:23

Rob W

350k87 gold badges811 silver badges683 bronze badges

1 Comment

Jeff Reddy Over a year ago

This solves my problem of adding the same style defs multiple times.

Collectives™ on Stack Overflow

Nesting CSS Styles or inheritance

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related