Выберите конкретный элемент, прежде чем другой элемент

Question

я следующий 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> 

Я хотел бы выбрать только ту h2, которая непосредственно перед ul. Как я могу это сделать? В моем содержании есть еще много uls и многие другие h2s, поэтому решение должно быть универсальным.

Answer 1

Насколько я знаю, CSS не предлагает selectors, который будет предназначаться до a селектор. Не могли бы вы выбрать его как h2, который находится непосредственно после p (p + h2)?

h2 { 
    color: #1a1a1a; 
} 

p + h2 { 
    color: #0cc; 
} 

Example on JSFiddle

Как вы можете видеть, это, вероятно, лучший селектор вы можете использовать, если вы полагаетесь на CSS, хотя вы могли бы легко просто добавить класс к каждому h2, который перед ul , Это позволит избежать случая, когда у вас есть параграф абзаца перед другим h2 и параграфом параграфа.

Вы могли бы сделать это с помощью JQuery:

.highlight { 
    color: #0cc; 
} 

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

Example on JSFiddle

Это выбирает каждый ul, затем выбирает h2, который перед ним, прежде чем, наконец добавив .highlight класс к нему.

Answer 2

Эй я думаю, что вы хотите, как, как этот

Css

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



ul ~ h2{ 
color:green; 
} 

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

Answer 3

с этим вы можете стилизовать только первый элемент h2

h2:first-child { color:red; } 

для поддержки браузера прочитать здесь: http://www.quirksmode.org/css/contents.html#t17

Answer 4

Вы должны использовать этот

div h2::nth-child(2) { 

} 

Answer 5

Вы можете использовать общий одноуровневый селектор ~.

В вашем случае вы можете использовать h2~ul, который будет применяться к h2 до ul внутри того же родителя.