previouse sibling in hover css code example

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

Tags:

Css Example