Select first occurring element after another element

Question

I've got the following HTML code on a page:

<h4>Some text</h4>
<p>
Some more text!
</p>

In my .css I've got the following selector to style the h4 element. The HTML code above is just a small part of the entire code; there are several divs more wrapped around belonging to a shadowbox:

#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4
{
    color               : #614E43;
    margin-top          : 5px;
    margin-left         : 6px;
}

So, I have the correct style for my h4 element, but I also want to style the p tag in my HTML.

Is this possible with CSS-selectors? And if yes, how can I do this?

score 251 · Accepted Answer · edited Jul 20 '23 at 21:36

251

#many .more.selectors h4 + p { ... }

This + is called the adjacent sibling selector.

Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).

edited Jul 20 '23 at 21:36

David d C e Freitas

7,481
4
58
67

answered Jan 07 '11 at 07:22

Phrogz

296,393
112
651
745

1

An alternative is to use JS to find your `h4` elements, walk to the next sibling and add a CSS class to that. With jQuery, this would simply be `$('#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4').next().addClass('shadowbox-h4-p');` – Phrogz Jan 07 '11 at 14:10
3

Note that this only works on elements following the first one IMMEDIATELY. If you want to have the second next html element, you can chain it up like this: #selector .original + h4 + p to get the p following an h4 following an .original element. Very usefull – user1610743 Apr 01 '14 at 17:07

score 54 · Answer 2 · answered Oct 25 '12 at 17:41

For your literal example you'd want to use the adjacent selector (+).

h4 + p {color:red}//any <p> that is immediately preceded by an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I'm not</p>

However, if you wanted to select all successive paragraphs, you'd need to use the general sibling selector (~).

h4 ~ p {color:red}//any <p> that has the same parent as, and comes after an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I am too</p>

It's known to be buggy in IE 7+ unfortunately.

Very useful info that ```~``` ... Thanks! – user281681 Oct 17 '22 at 08:36 — user281681, Oct 17 '22 at 08:36

score 21 · Answer 3 · answered Jun 07 '12 at 09:35

21

Just hit on this when trying to solve this type of thing my self.

I did a selector that deals with the element after being something other than a p.

.here .is.the #selector h4 + * {...}

Hope this helps anyone who finds it :)

answered Jun 07 '12 at 09:35

Tom

229
2
4

9

Using the `*` matches any element as described in the title. Was a helpful reminder for me. – James EJ Aug 23 '13 at 12:17
2

This is the only answer that fits the question. Other answers require prior knowledge on the type of preceding element. – Hugo Wijdeveld Aug 31 '18 at 10:25
Happy I found this answer among the responses doubted there would be a wildcard, thanks! – KR34T1V Oct 21 '21 at 10:28

score 8 · Answer 4 · edited Aug 10 '21 at 04:30

8

Simplifying for the beginners:

If you want to select an element immediately after another element you use the + selector.

For example:

div + p The + element selects all <p> elements that are placed immediately after <div> elements

If you want to learn more about selectors use this table.

edited Aug 10 '21 at 04:30

Canned Man

734
1
7
26

answered Jan 16 '20 at 16:18

Trooller

179
1
2
9

score -2 · Answer 5 · answered Jun 20 '20 at 22:07

-2

I use latest CSS and "+" didn't work for me so I end up with

:first-child

answered Jun 20 '20 at 22:07

VNicholson

25
4

1

That's for the first child of the element and not the next element. – Tarkan Aug 26 '20 at 11:54

Select first occurring element after another element

5 Answers5

Linked

Related