Answers for "how to select previous sibling in css"

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;
}

css select sibling

/*
Adjecent Sibling Selector
-------------------------
example: Select all <p> tags that immediatly follows after <div> tag
*/
div + p {
  background-color: yellow;
}

/*
General Sibling Selector
-------------------------
example: Select all <p> tags that has a sibling with a <div> tag
*/
div ~ p {
  background-color: yellow;
}