Seleccionar elemento específico antes de que otro elemento

Question

He HTML siguiente estructura:

<div> 
    <h2>Candy jelly-o jelly beans gummies lollipop</h2> 
    <p> 
    Cupcake ipsum dolor sit amet. Sugar plum liquorice dragée oat cake cupcake. 
    </p> 
    <p> 
    Candy tiramisu bonbon toffee. Croissant pudding ice cream soufflé pastry toffee chocolate bar. Tiramisu wypas tootsie roll icing fruitcake oat cake icing soufflé tiramisu. 
    </p> 
    <h2>Dessert pie cake</h2> 
    <ul> 
    <li>liquorice</li> 
    <li>powder</li> 
    <li>dessert</li> 
    </ul> 
    <h2>Chupa chups sweet dragée</h2> 
    <p> 
    Chocolate cake biscuit pie jelly-o chocolate bar. Marshmallow topping sugar plum apple pie brownie cotton candy dragée lemon drops. Soufflé cake toffee. 
    </p> 
</div> 

me gustaría que elegir sólo h2 que es directamente antes ul. ¿Cómo puedo hacer esto? En mi contenido hay muchos más uls y muchos más h2s, por lo que la solución debe ser universal.

Answer 1

Por lo que yo sé, CSS no ofrece selectors el cual tendrá como objetivo antes de un selector. ¿Podría seleccionarlo como h2 que está directamente después de p (p + h2)?

h2 { 
    color: #1a1a1a; 
} 

p + h2 { 
    color: #0cc; 
} 

Example on JSFiddle

Como se puede ver, este es probablemente el mejor selector que puede utilizar si usted está confiando en CSS, aunque se podría fácilmente con sólo añadir una clase a cada h2 que está delante de un ul . Eso evitaría el caso en el que tenga una sección de párrafo antes de otra sección h2 y párrafo.

usted puede hacer esto utilizando jQuery:

.highlight { 
    color: #0cc; 
} 

$('ul').prev('h2').addClass('highlight') 

Example on JSFiddle

esta forma se selecciona cada ul, a continuación, selecciona la h2 que está delante de él, antes de añadir, finalmente, la clase .highlight a ella.

Answer 2

Hey Creo que desee, como esto

Css

div h2{ 
font-weight:bold; 
    color:red; 
} 



ul ~ h2{ 
color:green; 
} 

Demostración en directo http://jsfiddle.net/rohitazad/JxST8/4/

Answer 3

con esto usted puede estilo sólo el primer elemento h2

h2:first-child { color:red; } 

de soporte de los navegadores leer aquí: http://www.quirksmode.org/css/contents.html#t17

Answer 4

para utilizar este

div h2::nth-child(2) { 

} 

Answer 5

Puede usar el hermano generales selector ~.

En su caso, puede usar h2~ul que se aplicará a la h2 antes de ul dentro del mismo elemento primario.