Как выбрать первый, второй, или третий элемент с данным именем класса?

Как я могу выбрать определенный элемент в списке элементов? У меня есть следующее:

<div class="myclass">my text1</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<div>
    <p>more stuff</p>
</div>
<p>
    <span>Hello World</span>
</p>
<div class="myclass">my text2</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<p>
    <span>Hello World</span>
</p>
<input type=""/>
<div class="myclass">my text3</div>
<!-- some other code follows -->
<div>
    <p>stuff</p>
</div>
<footer>The end</footer>

У меня есть класс CSS div.myclass {doing things} это относится ко всем, очевидно, но я также хотел смочь выбрать первое, второе, или третье отделение класса .myclass как это, независимо от того, где они находятся в разметке:

div.myclass:first {color:#000;} 
div.myclass:second {color:#FFF;} 
div.myclass:third {color:#006;}

Почти как jQuery индексируют выбор .eq( index ), который является тем, что я использую в настоящее время, но мне нужна альтернатива без сценариев.

Чтобы быть конкретным, я ищу псевдо селекторы, не вещи как добавление другого класса или использование идентификаторов, чтобы заставить вещи работать.

70
задан TylerH 25 February 2016 в 03:35
поделиться