style Drugi element na stronie o tej samej klasie

Question

Witaj, czy istnieje sposób na css do stylu drugiego elementu na stronie z tą samą klasą nieco inną niż pierwsza.

Na przykład mam dwa ul na stronie z klasą topbardropdownmenu. Chcę dać drugiemu ulowi inne tło niż pierwsze. Czy istnieje sposób, aby to zrobić bez zmiany html?

Answer 1

co przyniesie <ul> elementy? Będę zakładać <div id = "lists">

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

} 

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

} 

... alternatywnie

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

Answer 2

Możesz użyć: nth-child http://css-tricks.com/how-nth-child-works/, ale IE może z tym walczyć. Rozważmy następujący jQuery alternatywę:

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

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

Answer 3

Można to zrobić z pseudo-selektor :nth-child(). Jest to jednak CSS3 i nie jest obsługiwany w niektórych przeglądarkach (np. < = IE8 & < = FF3.0 nie obsługuje tego).

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

Można to zrobić za pomocą JavaScript w sposób zgodny z różnymi przeglądarkami, jeśli jest to opcja dla Ciebie.

Answer 4

Spójrz na CSS3 nth-child() pseudo-class.

Answer 5

Zależy jakich przeglądarek użytkownicy korzystają, może być w stanie korzystać z nth-of-type css pseudo-selektor:

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

Jeśli istnieje konkretny wzór na występowanie tych ul elementów, można użyć potomka i/lub selektory dla rodzeństwa:

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 */ 
}