CODEWITHSUNDEEP
csscss-selectorspseudo-element
anthony
anthony

Reputation: 282

CSS: Does the plus sign work with pseudo elements?

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

Upvotes: 1

Views: 1968

Answers (1)

BoltClock
BoltClock

Reputation: 724292

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.

See also:

Upvotes: 3

Related Questions