Выберите первый элемент CSS, используя псевдо-класс

Question

I имеет следующую структуру:

<div class="myClass">1</div> 
<div class="myClass">2</div> 

Как выбрать первый элемент Немаловажен .myClass?

Я знаю, что я могу сделать: [PARENT OF .myClass] .myClass:first-child {/* rules */}, но мне интересно, если есть псевдо класс CSS, который выбирает первый элемент согласованного селектора.

Возможно ли это? Как?

Селектор jQuery будет выглядеть так: .myClass:first, но :first, похоже, не работает в CSS.

Answer 1

Хорошо, я не уверен, но это может сработать для вас.

some.great-selector:first-of-type { 
    /* Your rules here */ 
} 

Это будет соответствовать только первому ребенку, который соответствует some.great-selector в каждом родительском узле. Это несколько отличается от того, что делает :first в JQuery, но может оказаться полезным, например. в сочетании с селектором parent >.

Answer 2

: первым ребенком является ближайший, который вы получите. Хотя это хорошо поддерживается, если вы ищете что-то, что будет работать в старых браузерах.

Если вы хотите, чтобы добиться поддержки в устаревших браузерах вы можете применить стиль ко всем элементам с определенным именем класса, а затем удалить его для всех двойников классов, так:

.my-class { 
    border-top: 1px solid lightgray; 
    border-bottom: 1px solid lightgray; 
} 

.my-class + .my-class { 
    border-top: none; 
} 

довольно произвольного пример, но ты Я пойду.

Answer 3

Вы могли бы использовать:

.myClass:first-of-type { 
     background-color:#233423; 
     color:#FFFFFF; 
    } 

http://jsfiddle.net/65adr/44/

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

http://reference.sitepoint.com/css/css3psuedoclasses