hover css selector code example

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

Example 2: pseudo class css

.element:nth-child(1)
.element:hover
.element:visited