Topic: CSS...sharing IDs..?? (Page 1 of 1)

In the current theme for my Wordpress blog the main template refers to a div called content. In the main style sheet, the content is defined as below.

I have created a custom page template on the main template. This custom page template will refer to the same main style sheet.

If I change the name of the div in the custom page template from content to content2 and I only want to change the background-color can i do this without having to duplicate all the other rules? I would remove the background-color from content, but the rest would be shared.

#content {
	text-align:left;
	font-size:12px;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	padding:12px 80px;
	color:#EDE6EE;
	
	background-color:#303030;
	float: left;
	width: 628px;
	}

	
#content a {
	color:#FFEBCD;
	text-decoration: none;
	outline: none;

	}
#content a:hover {
	color:#EDE6EE;
	}

Trying to do:

#content { background-color:#303030; 	}
#content2 { background-color:#000000; 	}


#content  content2{
	text-align:left;
	font-size:12px;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	padding:12px 80px;
	color:#EDE6EE;
	
	float: left;
	width: 628px;
	}

	
#content content2 a {
	color:#FFEBCD;
	text-decoration: none;
	outline: none;

	}
#content content2  a:hover {
	color:#EDE6EE;
	}

Nature & Travel Photography
Main Entrance

(Edited by SleepingWolf on 07-06-2009 23:31)

No. The CSS would have no way to know that you want to relate it to the #content styles.

The easiest way to do this would be to add a class to the div (in addition to the id), and define your new background color in the styles for that class.
Just make sure the background color for the class is defined AFTER the styles for the id in your css.

{{edit -
Ok, it looks like you were editing while I was posting! I may have misunderstood your intent a little

this: "#content content2{}" tells the browser to style an element of the type 'content2' (which doesn't exist as an element type) that is inside an element with an ID of "content".

What you need is

#content, #content2 
{

...shared styles....

}

if you want an element with either ID to share the styles.
and then you will need

#content a, #content2 a 
{

...shared styles....

}

and so on...

You can do this with any number of selectors...you can specify any number of elements, id's, and classes that will share a set of styles, simply by separating them with commas.
if you separate with a space, you are specifying that the second item is a child of the first.

You could mix it up completely

#content, div p span strong a, .thisclass, li.thatclass, .thisclass .thatclass, #thisid .thisclass (etc etc etc){
...shared styles....
}

and so on...

(Edited by DL-44 on 07-06-2009 23:50)

Ok thanks DL.
I will create a new class for each background color and then specify it in the content dive for each template.
Thankfully the theme had only two files to edit.

.bgcontent0 {
 background-color:#303030;
}

with

<div id="content" class="bgcontent0">

Nature & Travel Photography
Main Entrance

Of course, ideally you would also have a class name that was semantically relevant - one that gave an indication of the purpose of the element (or the purpose of the differentiation in class), that would remain relevant should the particular style attribute you are addressing at the moment was no longer the issue...a hint at the subject matter contained within perhaps...?

Agreed, but then I would have to be sane right?


Nature & Travel Photography
Main Entrance

I am not aware of anything that has sanity as a prerequisite.

Missed your edit first time around.
That's exactly my intent. For some reason, when I had tried it with commas as separators. before I posted, it hadn't worked...strange.
This will allow me to customize certain pages without the need for multiple css files.
Thanks again for your help.


Nature & Travel Photography
Main Entrance

One of the biggest things I've learned is knowing when to use ID= vs. class=.

Use classes for objects that will be used multiple times. Use ID for objects that will be used only 1 time.