CSS Element Selector Question

[moltendorf]

I hope whoever here knows what I mean by selector, as in the CSS selector that is used to pick what XHTML elements the styles are applied to.

CSS Code:

hr.one {}
hr.two {}
hr.three {}
hr.four {}
hr. five {}
hr.six {}
hr.seven {}
hr.eight {}
hr.nine {}
hr.ten {}

HTML Code:

<hr class="one" />
<hr class="two" />
<hr class="three" />
<hr class="four" />
<hr class="five" />
<hr class="six" />
<hr class="seven" />
<hr class="eight" />
<hr class="nine" />
<hr class="ten" />

What I'm trying to do is take the above code an simplify it as much as possible.

The hr tags will be wrapped in a specific div tag with a specific class attribute, so the CSS selectors will be div.corners-top hr.one for example instead of what I have in the example.

The above works, perfectly, but I'm not so sure if I can use CSS to simplify the HTML even more so (the HTML will be repeated several times per page, so using CSS to simplify it as much as possible will reduce file size).

I want to be able to take the HTML code, and convert it from what it is to something like this...

<div class="corners-top"><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /><hr /></div>

But still have unique style attributes for each hr tag without explicitly defining it anywhere but in the CSS document.

I've heard of the pseudo class first-child, but I'm not sure if you can mimic that functionality for the second, third, fourth and so on.

Perhaps the pseudo element :after could be used?

div.corners-top:after {}
div.corners-top:after:after {}
div.corners-top:after:after:after {}
div.corners-top:after:after:after:after {}
div.corners-top:after:after:after:after:after {}

Etc...

So I could just do...

<hr class="corners-top" />

(I'm gonna give the above a try right now)

Example of current use: http://preview.moltx.name/newtemplat...tes/dlive.php5
The source code is using <span> tags, not hr tags in repetitions of ten for both top and bottom rounded corners.

[moltendorf]

Well, it looks like what I want to do would best be achieved by using nth-child pseudo-class from the CSS3 specification, but it's not supported in Firefox, I didn't check for any other browsers, but I'm fairly sure it's not supported in others, and even if it is, I'm probably not going use it as I'll need another workaround for Firefox, effectively making no reason to use it in the first place. =(

[drhowarddrfine]

Well, it looks like what I want to do would best be achieved by using nth-child pseudo-class from the CSS3 specification, but it's not supported in Firefox, I didn't check for any other browsers, but I'm fairly sure it's not supported in others, and even if it is, I'm probably not going use it as I'll need another workaround for Firefox, effectively making no reason to use it in the first place. =(

I was trying to look this up earlier but that is what I was thinking of, nth-child. You're right and I don't think any browser supports it but I'd have to look at the nightly builds.

EDIT: Only Safari 3 and Opera 9.5 support it right now.

[moltendorf]

Yeah, I'm trying to hit the five browsers I think are most used... Internet Explorer 6+, Firefox 2+, Opera 7+, Safari, and Google Chrome.

Well, I guess size doesn't matter too much, anyways... Since I'm using PHP to generate the pages, the corners shouldn't be too hard to type... I think I've spent more time trying to make the corner XHTML code look more cleaner then just trying to get things done. :P
Finished result...
http://preview.moltx.n ame/newtemplate/templates/dlive.php5