multiple div query...redundant code

[Waffles]

Site I'm working on at the moment makes use of a 3 column layout, and there are various "Modules" in each column. I'm using an image for the top of the module, then specific content goes in between each div.

ie

<div class="sidebar_navigation">
<!-- navigation specific code -->
</div>

<div class="sidebar_login">
<!-- login specific code -->
</div>

<div class="sidebar_adverts">
<!-- advert specific code -->
</div>

consequentially i've found that i'm repeating a lot of code, probably unnecessary.

my css for each "module" div is:

.sidebar_navigation{
	background-image:url(../images/navigation.jpg);
	padding-top: 45px;
        border: 1px solid #c4c4c4;
}
.sidebar_login{
	background-image:url(../images/login.jpg);
	padding-top: 45px;
        border: 1px solid #c4c4c4;
}

.sidebar_adverts{
	background-image:url(../images/adverts.jpg);
	padding-top: 45px;
        border: 1px solid #c4c4c4;
}

I tried

.sidebar {
	padding-top: 45px;
        border: 1px solid #c4c4c4;
}

.sidebar navigation { background-image:url(../images/navigation.jpg); }

but that didn't appear to work. is there an efficient way of achieving this? I could have between 15-20 "sidebar" entries, and it just seems redundant

thanks

[Paul O'B]

Hi,

You missed the underscore in your example above otherwise the code should work.

e.g.

.sidebar {
    padding-top: 45px;
  border: 1px solid #c4c4c4;
}

.sidebar_navigation { background-image:url(../images/navigation.jpg); }

<div class="sidebar sidebar_navigation">etc...</div>

[ralph.m]

Any common styles can be grouped as shown in red:

.sidebar_navigation, .sidebar_login, .sidebar_adverts {
  padding-top: 45px;
  border: 1px solid #c4c4c4;
}

.sidebar_navigation{
  background-image:url(../images/navigation.jpg);
}
.sidebar_login{
  background-image:url(../images/login.jpg);
}

.sidebar_adverts{
  background-image:url(../images/adverts.jpg);
}

Edit: But Paul's solution is much better...

[Waffles]

missed the _ intentionally, I was thinking along the lines of when you do:

.somediv p {
 /* style <p> with parent of .somediv */
}

could you explain how CSS/the browser interprets

<div class="someclass another_class">

is this like a hierarchy? where the first is the parent class, then the next is a child class?

thanks again

[ralph.m]

is this like a hierarchy? where the first is the parent class, then the next is a child class?

No, they carry equal weight.

[Paul O'B]

is this like a hierarchy? where the first is the parent class, then the next is a child class?

No the classes are accumulative and added to the elements as required. In the case of conflicts the styles that gets priority will be the one later in the CSS file (as usual with the cascade).

As Ralph said above they are of equal weight but styles later in the CSS file will be the ones that win out.

The order of the classnames in the space separated list in the html is not important to the cascade. Only the order in the css file dictates their priority.

I use space separated classes all the time to add/modify existing styles and reduce code considerably.

[RyanReese]

Though an added advantage of when you specify multiple classes is that you can identify the elements that have multiple classes

<p class="sexy red"></p>

Now if you wanted to identify an element that had both classes you could do

.sexy.red{}

Though IE6 will only read the last class, aka .red in this case, but once IE6 is dead we can make use of this