同じクラスのページの2番目の要素

Question

こんにちは、同じクラスのページで2番目の要素を最初のものと少し違うようにスタイルを設定するCSSがある方法があります。

たとえば、topbardropdownmenuのクラスを持つページに2つのulがあります。私は第2 ulに最初のものとは異なる背景を与えたい。 htmlを変更してこれを行う方法はありますか？

Answer 1

<ul>要素を保持していますか？私はあなたが:nth-child()疑似セレクタでそれを行うことができ、代わり

div > ul.topbardropdownmenu:not(:first-child)

Answer 2

あなたは使用できます：nth-​​child http://css-tricks.com/how-nth-child-works/しかし、IEはそれと闘うことがあります。このjQueryの代替を考えてみましょう：

$(".class").eq(1).css(); 

http://api.jquery.com/eq/

Answer 3

... <div id = "lists">

/* First element */ 
div > ul.topbardropdownmenu:first-child{ 

} 

/* Rest of the elements */ 
div > ul.topbardropdownmenu{ 

} 

と仮定します。 CSS3ですが、一部のブラウザではサポートされていません（たとえば、< = IE8 & < = FF3.0ではサポートされていません）。

.topbardropdownmenu:nth-child(2) { background: #FF0000; }

これはオプションの場合でも、ブラウザ間で互換性のある方法でJavaScriptを使用して行うことができます。

Answer 4

CSS3 nth-child() pseudo-classをご覧ください。

Answer 5

それはあなたのユーザーが利用している、あなたはnth-of-type CSS擬似セレクターを使用することができるかもしれないブラウザいるによって異なります。

ul.topbardropdownmenu:nth-of-type(2) { 
    /* styles the second ul of class=topbardropdownmenu 
} 

これらul要素の発生に特定のパターンがある場合、あなたは子孫を使用することができます

div > ul.topbardropdownmenu { 
    /* styles all ul.topbardropdownmenu that are the immediate descendants of a div */ 
} 

p + ul.topbardropdownmenu { 
    /* styles all ul.topbardropdownmenu that immediately follow a p */ 
}