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.

Answer 1

Give the elements multiple classes.

<div class="left highlighted">

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