Select specific element before other element

Question

I have following HTML structure:

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

I would like to choose only that h2 which is directly before ul. How can I do this? In my content there are many more uls and many more h2s so the solution should be universal.

Possible duplicate of [Is there a "previous sibling" CSS selector?](https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector) — vsync, Jan 02 '19 at 22:44

score 35 · Accepted Answer · edited Jan 15 '17 at 07:49

35

As far as I know, CSS doesn't offer any selectors which will target before a selector. Could you select it as an h2 which is directly after a p (p + h2)?

h2 {
    color: #1a1a1a;
}

p + h2 {
    color: #0cc;
}

Example on JSFiddle

As you can see, this is probably the best selector you can use if you're relying on CSS, although you could easily just add a class to each h2 that is before a ul. That would avoid the case where you have a paragraph section before another h2 and paragraph section.

You could do this using jQuery:

.highlight {
    color: #0cc;
}

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

Example on JSFiddle

This selects every ul, then selects the h2 that is before it, before finally adding the .highlight class to it.

edited Jan 15 '17 at 07:49

intcreator

4,206
4
21
39

answered Apr 19 '12 at 09:42

djlumley

2,955
2
24
30

1

Thanks for your answer. I knew about jQuery solution, but I was wondering whether it can be done in pure CSS. – user1292810 Apr 23 '12 at 21:52
2

I'm trying to select first anchor before my delete link , and I can't make `a` link inside andother `a` link , like this `file.exe ✖` the only solution workes are with JQuery , – Salem Feb 19 '16 at 12:50

Shreyasikhar26 · Answer 2 · 2023-02-21T07:00:43.933

20

To select h2 elements that are directly before ul element

h2:has(+ul) {
    background-color: #ff0000;
}

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/:has

Please Note: It will not work on some browsers like Firefox, check browser support here.

edited Feb 21 '23 at 07:00

answered Jan 05 '23 at 14:32

Shreyasikhar26

455
5
10

2

thanks ! should be selected as best answer. – kro Feb 28 '23 at 14:13

score 0 · Answer 3 · answered Apr 19 '12 at 09:43

0

with this you can style just the first h2 element

h2:first-child { color:red; }

for browser support read here: http://www.quirksmode.org/css/contents.html#t17

answered Apr 19 '12 at 09:43

alphanyx

1,647
2
13
18

score 0 · Answer 4 · answered Apr 28 '19 at 07:01

The rule h2~ul will not select h2 but ul. So you will not be able to apply any style to h2.

CSS element1~element2

I have the same problem with panel location. I have a element that is followed by a . And in this case I would like to reduce the height or the min-height (depends on the panels are fixed or not) of the main panel by style application.

In case of fixed footer, because I can declare the element before the main in my html file (it will be relocated by top/left properties) I can use the ~ selector like this: footer ~ main. But in case of non fixed footer, the only way I found is to add a class at document.ready() call.

score -1 · Answer 5 · edited Jan 27 '17 at 08:29

-1

You should use this

div h2::nth-child(2) {

}

edited Jan 27 '17 at 08:29

Daniel

3,541
3
33
46

answered Apr 19 '12 at 09:44

Mateusz Rogulski

7,357
7
44
62

1

older browser does not support this.. speciale – alphanyx Apr 19 '12 at 09:45
1

In my content there are much more `h2s` and much more `uls` so solution should be more universal. – user1292810 Apr 19 '12 at 09:48

score -4 · Answer 6 · edited Jan 27 '17 at 08:30

-4

You can use the general sibling selector ~.

In your case, you can use h2~ul that will apply to the h2 before ul inside the same parent.

edited Jan 27 '17 at 08:30

Daniel

3,541
3
33
46

answered Apr 19 '12 at 09:44

davidaam

443
1
8
17

4

Unfortunately, it wont. It will apply to all `h2` _after_ `ul` inside the same parent. – djlumley Apr 19 '12 at 22:46
1

`h2 ~ ul` targets any UL with an H2 as a previous sibling. This example does not target an H2 element whatsoever. – MLK.DEV Oct 02 '20 at 18:42

Select specific element before other element

6 Answers6

Linked

Related