CSS: Does the plus sign work with pseudo elements?

Question

For markup similar to this:

<div>
    <p>hello world</p>
</div>
<div>
    <h4>hello world</h4>
</div>

Can you do something like this in CSS:

div:after {
   content: "";
   display: block;
   border-bottom: 2px solid red;
}
p + div:after {
   content: "";
   display: block;
   border-bottom: 2px solid blue;
}

...meaning to say "Give all :after pseudo elements immediately following a <p> a blue border. Give all others a red border".

This doesn't seem to work. I realize this is because the + sign is applying to the 'div' selector, not the 'div:after' selector as a whole. But is there another way to target these in CSS (without adding a new class specific to these instances and without manipulating the DOM)?

It really depends on what you are actually trying to do....essentially, at the moment, you need a parent selector...and there isn't one. — Paulie_D, Sep 01 '15 at 20:51
*Give all `:after` pseudo elements immediately following a
a blue border. Give all others a red border.* What is it exactly you want to target with the `::after`? You can't target a pseudo-element. A pseudo-element is added to a selector that has matched an element. — Michael Benjamin, Sep 02 '15 at 00:18
@BoltClock *"I realize this is because the + sign is applying to the 'div' selector, not the 'div:after' selector as a whole"* --> I interpret this so that the OP thinks `p + div` would target the second div, which it doesn't. — JJJ, Sep 02 '15 at 09:01
@Juhana: What I think is that the OP is saying it's targeting a div element that he knows doesn't exist - which is *represented* by the 'div' type selector. But it can be interpreted both ways. — BoltClock, Sep 02 '15 at 09:22

score 3 · Accepted Answer · edited May 23 '17 at 12:06

Basically, what Michael_B said:

You can't target a pseudo-element. A pseudo-element is added to a selector that has matched an element.

"Target" is a vague term, but the second sentence is on point here. Combinators only work with elements, because selectors match elements, not pseudo-elements. What you're really trying to do in selector nomenclature is to style the ::after pseudo-element of a div whose last child is a p element (in which case the ::after box immediately follows the p box in the formatting tree):

<div>
    <p>hello world</p>
    div::after <!-- Blue border -->
</div>
<div>
    <h4>hello world</h4>
    div::after <!-- Red border -->
</div>

And you can't do that, because there is no parent selector.

I imagine something like div:has(> p:last-child)::after from Selectors 4 will work, but it depends on whether :has() makes it into CSS in the first place. The only other good option is to figure out which of these div elements has a p as their last child and assign them a special class name.

CSS: Does the plus sign work with pseudo elements?

1 Answers1