estilo 2do elemento en la página con la misma clase

Question

Hola, hay una forma con css para dar estilo al 2º elemento en la página con la misma clase de forma ligeramente diferente a la primera.

Por ejemplo, tengo dos ul's en una página con una clase de topbardropdownmenu. Quiero darle a la 2nd ul un trasfondo diferente al primero. ¿Hay alguna forma de hacerlo sin alterar el html?

Answer 1

lo que depara el <ul> elementos? Vamos a suponer un <div id = "lists">

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

} 

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

} 

... alternativamente

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

Answer 2

Puede usar: nth-child http://css-tricks.com/how-nth-child-works/ pero IE puede tener problemas con él. Considere esta alternativa jQuery:

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

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

Answer 3

Puede hacerlo con la pseudo-selector de :nth-child(). Sin embargo, es CSS3 y no es compatible con algunos navegadores (por ejemplo, < = IE8 & < = FF3.0 no lo admite).

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

Puede hacerlo con JavaScript de una manera compatible con varios navegadores, si esa es una opción para usted.

Answer 4

Mire el CSS3 nth-child() pseudo-class.

Answer 5

Depende qué navegadores sus usuarios están utilizando, es posible que pueda utilizar el nth-of-type CSS pseudo-selector:

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

Si hay un patrón particular a la aparición de estos ul elementos, se puede usar descendiente y/o selectores de hermanos:

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