ul { width: 200px; height: auto; } ul > li { width: 100%; height: 30px; background: #fff; list-style: none; border-bottom: 1px solid #999; position: relative; } span { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } 
 <ul> <li><span>firest</span></li> <li><span>second</span></li> <li><span>third</span></li> </ul>

How to make the text change color when you hover over the first list item? And it needs to be done using pseudo-classes :nth-child() and :hover .

I understood how to change from the first, but I cannot continue and change from the second ..

 ul > li:nth-child(1):hover { color: pink; }

    1 answer 1

    when you hover on the first item in the list of the second text has changed color

     ul > li:nth-child(1):hover~li:nth-child(2) span, ul > li:nth-child(2):hover~li:nth-child(3) span{ color: tomato; } 

     ul { width: 200px; height: auto; } ul > li { width: 100%; height: 30px; background: #fff; list-style: none; border-bottom: 1px solid #999; position: relative; } span { display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } ul > li:nth-child(1):hover~li:nth-child(2) span, ul > li:nth-child(2):hover~li:nth-child(3) span{ color: tomato; } 
     <ul> <li><span>firest</span></li> <li><span>second</span></li> <li><span>third</span></li> </ul>