Tengo un css y cuando estoy escribiendo:

 .rate:not(:checked) > label:active, .rate:not(:checked) > label:active ~ label { color: red; }

funciona bien pero para este código no funciona:

 .rate:not(:checked) > label:focus, .rate:not(:checked) > label:focus ~ label { color: black; }

CÓDIGO HTML:

 <div class="rate p-0"> <input type="radio" id="star5" name="rate" value="5" /> <label for="star5" title="text">5 stars</label> <input type="radio" id="star4" name="rate" value="4" /> <label for="star4" title="text">4 stars</label> <input type="radio" id="star3" name="rate" value="3" /> <label for="star3" title="text">3 stars</label> <input type="radio" id="star2" name="rate" value="2" /> <label for="star2" title="text">2 stars</label> <input type="radio" id="star1" name="rate" value="1" /> <label for="star1" title="text">1 star</label> </div>