How to Target a :Before or :After Pseudo-Element With a Sibling Combinator

Can I target a :before or :after pseudo-element with a sibling combinator?

You can't target :after since it's content is not rendered in the DOM and it does not manipulate it - for this to work the DOM would have to be re-rendered and CSS can't manipulate it like this.

Check the specification for detailed understanding: http://www.w3.org/TR/CSS2/generate.html#propdef-content

Generated content does not alter the document tree. In particular, it
is not fed back to the document language processor (e.g., for
reparsing).

I suggest you use JavaScript to do the job for you.

Are :before :after siblings?

Pseudo-elements cannot be targeted by sibling combinators because sibling combinators only represent element siblings, not pseudo-element siblings.

So, although the boxes generated by ::before and ::after are siblings of one another in terms of layout, for the purposes of sibling combinators they are not.

It is not possible to write a selector styling an element's ::before pseudo-element when its ::after pseudo-element is hovered. (For that matter, ::after:hover is not valid outside of Selectors 4 either, and no implementations exist.) There are hacks that make use of things like pointer-events but there is nothing that is guaranteed to work on all browsers.

Why does the general-sibling combinator allow toggling pseudo-element's content, but not the adjacent-sibling?

This is a long-standing bug in WebKit browsers related to the use of certain dynamic pseudo-classes with next-sibling combinators. This happens whether you're applying styles to the sibling element itself or a pseudo-element of that sibling element.

I don't know if anybody has filed a bug report yet, but this has been seen rather frequently on the site:

  • Webkit bug with `:hover` and multiple adjacent-sibling selectors
  • CSS adjacent sibling selectors, Safari and <nav> elements

Strangely it was also reported that Chrome had issues with the general sibling combinator, but as you note it works in your given scenario:

  • Why doesn't this CSS selector work: a:hover ~ span?

So either that was fixed, or something else triggers/triggered it.

Target a class if a pseudo class of another sibling is triggered

If the button is the following sibling of the input (as in your example code), you can use the direct sibling selector + :

input:focus + button{
background:gold;
}

DEMO

If the button is a sibling of the input but not directly after the input, you can use the general sibling selector ~ :

input:focus ~ button{
background:gold;
}

DEMO

CSS :target pseudo class and sibling issue

The general sibling combinator ~ doesn't work backwards. So, since your .titlewrap is coming before #tevents in your HTML, your selector won't work.

Unfortunately there's no previous sibling combinator, so if you can't change the markup and style the changes accordingly, then you can't do this with :target and a sibling combinator.

By the way, your top: 30% style isn't taking any effect either, and that's because you didn't set an explicit height for your .titlewrap.

CSS: Does the plus sign work with pseudo elements?

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:

  • Can I target a :before or :after pseudo-element with a sibling combinator?
  • Is there a CSS parent selector?

Is there a previous sibling selector?

No, there is no "previous sibling" selector.

On a related note, ~ is for general successor sibling (meaning the element comes after this one, but not necessarily immediately after) and is a CSS3 selector. + is for next sibling and is CSS2.1.

See Adjacent sibling combinator from Selectors Level 3 and 5.7 Adjacent sibling selectors from Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.



Related Topics



Leave a reply



Submit