Answers for "css selector previous siblings"

how to select previous element in css in hover

<div className="ppp">
<div className="ccc">a</div>
<div className="ccc">d</div>
<div className="ccc">r</div>
</div>


//self
div.ccc:hover{
    background-color: #00f;
}

//not self
div.ccc:not(:hover){
    background-color: #00f;
}

//self and pre
div.ppp:hover div.ccc:not(:hover ~ div){
    background-color: #00f;
}
//self and next
div.ccc:hover ~div , div.ccc:hover {
    background-color: #00f;

}
//just pre
div.ppp:hover .ccc:not(:hover):not(:hover ~ div){
    background-color: #00f;
}
//just next
div.ccc:hover ~ div{
    background-color: #00f;
}

sibling selector css

/*General Sibling*/
/*The general sibling selector selects all elements that are siblings of a specified element.
The following example selects all <p> elements that are siblings of <div> elements: */
/*<div></div>
  <p></p>*/
div ~ p{
}

/*Adjacent Sibling*/
/*The adjacent sibling selector is used to select an element that is directly after another specific element.
Sibling elements must have the same parent element, and "adjacent" means "immediately following".
The following example selects the first <p> element that are placed immediately after <div> elements*/
/*<div><p></p></div>
  */
div + p{
}