How to use CSS to select an element only if a specific element comes after the one you want to select?

Question

Using CSS and the following example, is there a way to select only <p>'s that are followed by <ul>'s?

If not, what is the jQuery selector, or would it require an if statement?

<p>Hello there.</p>

<p>Select this para!</p>
<ul>
    <li>list item</li>
</ul>

<ul>
    <li>don't select this list! :)</li>
</ul>

<p>And don't select this paragraph! :)</p>

Solution 1

It's not possible in CSS3, the best you can do is select only the <ul> which follow <p>:

p + ul { /*...*/ }

However it will be possible when browsers start implementing the CSS4 subject operator:

!p + ul { /*...*/ }

In the meantime, you'll have to use jQuery and walk the DOM back.

Solution 2

No, actually CSS won't help you in this.

What you need would be a Previous Sibling Selector, that does not exist.

Take a look at this too: Is there a "previous sibling" CSS selector?

Solution 3

Unfortunately, you are going to need to turn to javascript. The closest CSS selector to what you want (adjacent sibling selector) would do the exact opposite of what you want. For example, you could select all <ul> after a <p> like this:

p + ul { //style }

You can however make this selection in jQuery like this:

$('p + ul').prev('p')

So you first select all <ul> immediately after <p> and then select the previous <p> from them.

Solution 4

You could also stick an empty span before the p thats before the ul and select that:

span + p {
margin-bottom: 0;
}

Solution 5

http://api.jquery.com/prev/

Would something like this work for you? you might have to add a class to P's,

but it should allow you to select every class selected element before Uls

Example:

<p class="selected">my p</p>
<ul>My ul</ul>
<script>$("ul").prev(".selected").css("background", "yellow");</script>
</body>

View more solutions

Comments

[scott8035]

A jQuery snippet would be very helpful.

[robertc]

@scott8035 See Mike Brant's answer

[SherylHohman]

Mike Brant's answer, with jQuery example: stackoverflow.com/a/14469950/5411817