CODEWITHSUNDEEP
css
VVS
VVS

Reputation: 19604

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

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?

Upvotes: 1

Views: 1425

Answers (3)

Evan Meagher
Evan Meagher

Reputation: 4555

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.

Upvotes: 0

D&#39;Arcy Rittich
D&#39;Arcy Rittich

Reputation: 171411

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.

Upvotes: 1

Gumbo
Gumbo

Reputation: 655239

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

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

Upvotes: 0

Related Questions