Seleziona elemento specifico prima di un altro elemento

Question

Ho seguente struttura HTML:

<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> 

vorrei scegliere solo che h2 che è direttamente prima ul. Come posso fare questo? Nel mio contenuto ci sono molti altri uls e molti altri h2s quindi la soluzione dovrebbe essere universale.

Answer 1

Per quanto ne so, i CSS non offre alcuna selectors che si rivolgerà prima di un selettore. Potresti selezionarlo come h2 che è direttamente dopo un p (p + h2)?

h2 { 
    color: #1a1a1a; 
} 

p + h2 { 
    color: #0cc; 
} 

Example on JSFiddle

Come si può vedere, questo è probabilmente il selettore migliore che si può usare se vi affidate ai CSS, anche se si potrebbe facilmente basta aggiungere una classe per ogni h2 che è prima di un ul . Ciò eviterebbe il caso in cui si dispone di una sezione di paragrafo prima di un'altra sezione h2 e paragrafo.

Si potrebbe fare questo utilizzando jQuery:

.highlight { 
    color: #0cc; 
} 

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

Example on JSFiddle

Questo seleziona ogni ul, quindi l'h2 che è prima di esso, prima infine di aggiungere la classe .highlight ad esso.

Answer 2

Hey Penso che si desidera come come questo

Css

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



ul ~ h2{ 
color:green; 
} 

Demo online http://jsfiddle.net/rohitazad/JxST8/4/

Answer 3

con questo si può stile solo il primo elemento h2

h2:first-child { color:red; } 

per il supporto del browser leggere qui: http://www.quirksmode.org/css/contents.html#t17

Answer 4

si dovrebbe usare questa

div h2::nth-child(2) { 

} 

Answer 5

È possibile utilizzare il fratello generale selettore ~.

Nel tuo caso, è possibile utilizzare h2~ul che verrà applicato a h2 prima dello ul all'interno dello stesso genitore.