CSS - целевой первый элемент с классом

Question

HTML:

<p class=menu_top>Title</p> 
<p class=menu_top>Order</p> 
<p class=menu_top>Position</p> 
<p class=menu_top>Number</p> 

Как я могу предназначаться только первый элемент?

Answer 1

Использовать псевдокласс класса :first-child.

.menu_top:first-child { 
    your: rules; 
} 

http://jsfiddle.net/uKJcK/1/

Answer 2

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

<div class="menu_top"> 
    <p>Title</p> 
    <p>Order</p> 
    <p>Position</p> 
    <p>Number</p> 
</div> 

(и более семантически правильно было бы сделать это неупорядоченный список) Повторение не является необходимым, когда вы можете просто спекуляция в CSS следующим образом:

.menu_top p { 
    //all my basic styles for each menu item 
} 

.menu_top p:first-child { 
    // specific styles for just the first menu item 
} 

Переоценка вызывает нагрузку на переделку в будущем и заглушает код. Используйте каскад в свою пользу; он сокращает повторяющийся код и упрощает переопределять только отклонения.