The plus selector (
) is used to select the next adjacent sibling.
Is there an equivalent to the previous sibling?
P粉4867436712023-10-10 20:17:35
I found a way to style all previous siblings (as opposed to ~
) that might work depending on your needs.
Suppose you have a list of links, when the mouse is hovering over one of the links, all the previous links should turn red. You can do this:
/* default link color is blue */ .parent a { color: blue; } /* prev siblings should be red */ .parent:hover a { color: red; } .parent a:hover, .parent a:hover ~ a { color: blue; }
<div class="parent"> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> </div>
P粉5508235772023-10-10 19:15:30
No, there is no "previous sibling" selector.
Related to this, ~
is used for generic subsequent sibling elements (meaning that the element comes after this element, but not necessarily immediately after it), and is a CSS3 selector.
Represents the next sibling, which is CSS2.1.
SeeAdjacent Sibling Combinators "http://www.w3.org/TR/css3-selectors/" rel="noreferrer">Selector Level 3 and 5.7 Adjacent Sibling Selectors From the Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) specification.