CSS: Using ID's and classes on the same object?

[Scam]

Is this possible?

http://www.touchlinetactics.co.uk/unlive/index.php - I'd like the photo (which is a background) to change on each page, so was thinking of changing the div's CSS from:

#content #header-left {
	float: left;
	margin-top: 25px;
	margin-bottom: 25px;
	width: 332px;
	height: 248px;
	border: 1px solid #4f4f4f;
	background: #fffff0 url(img/header-left01.jpg) no-repeat scroll center;
	}

to something like

#content #header-left {
	float: left;
	margin-top: 25px;
	margin-bottom: 25px;
	width: 332px;
	height: 248px;
	border: 1px solid #4f4f4f;
	}

#content .header-left-01 {
background: #fffff0 url(img/header-left01.jpg) no-repeat scroll center;
}

#content .header-left-02 {
background: #fffff0 url(img/header-left02.jpg) no-repeat scroll center;
}

etc.

And in the HTML:

<div id="header-left" class="header-left-01"></div><!--/header-left-->

But it doesnt seem to want to play ball.

Any ideas? I'd be interested in using a random image from a set, but i dont think thats possible when using CSS to set the images as backgrounds?

EDIT: Yeah i know i could just copy the whole #header-left and modify it slightly, but that doesnt seem to work either so Go figure!

 

[Al Vallario]

The HTML looks fine to me; you can certainly assign an object both an id and a class.

I must admit, I've never seen CSS like that you've used. Why have you got #content in front of each statement? You don't need that, as attributes are automatically inherited as appropriate. I see no reason why the following code shouldn't work with the existing HTML:

div#header-left {
  float: left;
  margin: 25px 0;
  width: 332px;
  height: 248px;
  border: 1px solid #4f4f4f;
}

div.header-left-01 {
background: url("img/header-left01.jpg") no-repeat scroll center #fffff0;
}

div.header-left-02 {
background: url("img/header-left02.jpg") no-repeat scroll center #fffff0;
}

etc.

Note: I've thrown in a little bit of shorthand jiggery-pokery and re-arranged the background declarations. You also seemed to get the }'s slightly mixed up; if that was how it was in the actual code, that could explain why it wasn't working.

 

[MastermindUK]

I think '#content .header-left-01' would select a object with class header-left-01 which is a descendant of an object with id content, which isn't what your trying to do.

 

[Al Vallario]

I think '#content .header-left-01' would select a object with class header-left-01 which is a descendant of an object with id content, which isn't what your trying to do.

Yep, I think that's right. I've only ever seen #content > .header-left-01 used, though.

Looking through your CSS, Scam, it seems you're doing this throughout. There's absolutely no need to make your declarations chained like #content #main #right; just #right will suffice, unless you have another #right on the same page (in which case it should be a class, not an id)

 

[Scam]

Hmn confusing. Yes i screwed up in my first post with the {'s. (fixed now, wasn't in my CSS)

I dunno why i do #content #main #right or whatever, i think its just something i picked up!

Thanks guys, i'll give it a go tomorrow morning when i'm a bit more with it.