Как я могу сослаться на первое вхождение данного селектора в 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 }

Без редактирования существующего HTML, можно ли как-то сослаться на первое вхождение класса "foo" и придать ему другой стиль?

Answer 1

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

Примечание. Чтобы : первый ребенок работал в IE, необходимо объявить DOCTYPE Это не будет работать в IE6.

Answer 2

Если элементы сменяют друг друга, вы можете использовать это:

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

Answer 3

Если div содержится во внешнем div и первый foo был первым потомком этого внешнего div, вы можете использовать div#outer_div + div.foo { font-size: 12pt }

РЕДАКТИРОВАТЬ: Комментатор прав, это не будет работать. Способ сделать это с помощью + - сбросить атрибут font-size для всех остальных div.foo, до бесконечности:

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

Это не очень хороший способ, так что не обращайте внимания на мой ответ.