Выберите конкретный элемент перед другим элементом
У меня есть следующая структура 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/