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

У меня есть следующая структура 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, поэтому решение должно быть универсальным.

Ответ 1

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

h2 {
    color: #1a1a1a;
}

p + h2 {
    color: #0cc;
}

Пример на JSFiddle

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

Вы можете сделать это с помощью jQuery:

.highlight {
    color: #0cc;
}

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

Пример на JSFiddle

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

Ответ 2

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

h2:first-child { color:red; }

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

Ответ 3

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

div h2::nth-child(2) {

}

Ответ 4

Правило h2 ~ ul выберет не h2, а ul. Таким образом, вы не сможете применить любой стиль к h2.

CSS element1 ~ element2

У меня такая же проблема с расположением панели. У меня есть элемент, за которым следует. И в этом случае я хотел бы уменьшить высоту или минимальную высоту (зависит от того, фиксированы панели или нет) основной панели с помощью приложения стиля.

В случае с фиксированным нижним колонтитулом, поскольку я могу объявить элемент перед основным в моем html файле (он будет перемещен с помощью свойств top/left), я могу использовать селектор ~ следующим образом: footer ~ main. Но в случае нефиксированного нижнего колонтитула единственный найденный способ - добавить класс при вызове document.ready().

Ответ 5

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

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

Ответ 6

Эй, я думаю, ты хочешь, как будто это

Css

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



ul ~ h2{
color:green;
}

Живая демонстрация http://jsfiddle.net/rohitazad/JxST8/4/