Wybierz konkretny element przed inny element

Question

Mam następującą strukturę 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> 

chciałbym wybrać tylko ten h2 która jest bezpośrednio przed ul. Jak mogę to zrobić? W mojej zawartości jest wiele więcej uls i wiele więcej h2s, więc rozwiązanie powinno być uniwersalne.

Answer 1

O ile mi wiadomo, CSS nie oferuje żadnych selectors które będą kierować przed selektor. Czy możesz wybrać go jako h2, który jest bezpośrednio po p (p + h2)?

h2 { 
    color: #1a1a1a; 
} 

p + h2 { 
    color: #0cc; 
} 

Example on JSFiddle

Jak widać, jest to prawdopodobnie najlepszy selektor można użyć, jeśli jesteś polegając na CSS, chociaż można łatwo wystarczy dodać klasę do każdej h2 który jest przed ul . Uniknęłoby to przypadku, gdy masz sekcję akapitu przed inną h2 i sekcją akapitów.

Można to zrobić przy użyciu jQuery:

.highlight { 
    color: #0cc; 
} 

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

Example on JSFiddle

Wybiera każdy ul, następnie wybiera h2 który jest przed nim, zanim w końcu dodając klasę .highlight do niego.

Answer 2

Hej Myślę, że chcesz tak jak ten

Css

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



ul ~ h2{ 
color:green; 
} 

żywo demo http://jsfiddle.net/rohitazad/JxST8/4/

Answer 3

z tym można projektować tylko pierwszy h2 elementu

h2:first-child { color:red; } 

wsparcia przeglądarki przeczytać tutaj: http://www.quirksmode.org/css/contents.html#t17

Answer 4

Należy użyć tej

div h2::nth-child(2) { 

} 

Answer 5

Można użyć ogólnego rodzeństwa selektor ~.

W twoim przypadku możesz użyć numeru h2~ul, który będzie miał zastosowanie do h2 przed ul w tym samym katalogu nadrzędnym.