84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
The plus selector ( ) is used to select the next adjacent sibling.
Is there an equivalent to the previous sibling?
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; }
link link link link link
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.
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:
No, there is no "previous sibling" selector.
Related to this,
Represents the next sibling, which is CSS2.1.
~
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.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.