How can I reference the first occurence of a given selector in CSS?

Question

HTML:

<div class="foo">firstBar</div><!-- give this one a different style -->
<div class="foo">secondBar</div>
<div class="foo">thirdBar</div>

CSS:

 .foo { font-size: 12pt }

Without editing the existing HTML, is it possible to somehow reference the first occurence of the class "foo" and give it a different style?

Answer 1

div:first-child { font-size: 12pt }

Note: For :first-child to work in IE a DOCTYPE must be declared. This won't work in IE6.

Answer 2

If the divs are contained in an outer div and the first foo was the first child of this outer div, you could use div#outer_div + div.foo { font-size: 12pt }

EDIT: Commenter is right, this wouldn't work. The way to do it with + would be to reset the font-size attribute for all the other div.foo's, ad infinitum:

div.foo + div.foo { ... } div.foo + div.foo + div.foo { ... }

This wouldn't be a good way to go about it, so disregard my answer.

Answer 3

If the elements succeed each other, you can use this:

.foo { font-size: 2em }
.foo + .foo { font-size: inherit }