css - Selecting class inside element:first-child -

i'm trying make simple pie, circle divided in 4 pieces:

<ul class='pie'>     <li class='slice'>         <div class='slice-contents'></div>     </li>     <li class='slice'>         <div class='slice-contents'></div>     </li>     <li class='slice'>         <div class='slice-contents'></div>     </li>     <li class='slice'>         <div class='slice-contents'></div>     </li> </ul> 

i have css:

.pie {         position: relative;         margin: 1em auto;         border: dashed 1px;         padding: 0;         width: 32em;         height: 32em;         border-radius: 50%;         list-style: none;     }     .slice {         overflow: hidden;         position: absolute;         top: 0; right: 0;         width: 50%; height: 50%;         transform-origin: 0% 100%;     }     .slice-contents {         position: absolute;         left: -100%;         width: 200%; height: 200%;         border-radius: 50%;     }     .slice:first-child {         transform: rotate(15deg) skewy(-90deg);     }     .slice:first-child .slice-contents { background-color: lightblue; }     .slice:hover .slice-contents { background-color: violet; } 

.slice:first-child .slice-contents doesn't select .slice:hover .slice-contents does.

why this?

the selector working fine.

it’s whole element not visible, because of transform applied it. remove transform, , see showing up, in lightblue.

---

(so you’ll need go , figure out correct transformation show element wherever want …)