Home  >  Q&A  >  body text

Is there a selector for selecting previous sibling elements?

The plus selector ( ) is used to select the next adjacent sibling.

Is there an equivalent to the previous sibling?

P粉512363233P粉512363233397 days ago634

reply all(2)I'll reply

  • P粉486743671

    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>

    reply
    0
  • P粉550823577

    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.

    reply
    0
  • Cancelreply