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
Hover Effect: Expand Bottom Border
Css Selector For Attribute Names Based on a Wildcard
How to Create Multi-Color Border With Css
How to Create Div to Fill All Space Between Header and Footer Div
Calc of Max, or Max of Calc in CSS
Twitter Bootstrap - Add Top Space Between Rows
Greyscale Background CSS Images
Google Drive CSS/Js Returns 404 Error
Filter: Blur(1Px); Doesn't Work in Firefox, Internet Explorer, and Opera
Twitter Bootstrap Multilevel Dropdown Menu
How to Animate Handwriting Text on the Web Page Using Svg
Combining :Last-Child With :Not(.Class) Selector in Css
Using HTML Data-Attribute to Set CSS Background-Image Url
How to Wrap Text With No Whitespace Inside a ≪Td≫
Bootstrap 4 Card-Deck with Number of Columns Based on Viewport
CSS Div Stretch 100% Page Height
Using CSS, Can You Apply a Gradient Mask to Fade to the Background Over Text