A problem in CSS where css is not applied properly to the html code

Issue

So this is the code I am trying to recreate on my own page : https://codepen.io/Vlad3356/pen/PoReJVg

and this is the code I’ve wrote: https://codepen.io/Vlad3356/pen/GRxdMPz

I dont understand why on my code when I press a star i dont receive the same header message?Thanks

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;

Solution

In their CSS,

#rate-1:checked ~ form header:before{
  content: "I just hate it ";
}

the symbol tilde(~) is know as Subsequent-sibling Combinator. So their code has the header as a sibling to the star labels:

 <div class="star-widget">
    <input type="radio" name="rate" id="rate-5">
    <label for="rate-5" class="fas fa-star"></label>
    <input type="radio" name="rate" id="rate-4">
    <label for="rate-4" class="fas fa-star"></label>
    <input type="radio" name="rate" id="rate-3">
    <label for="rate-3" class="fas fa-star"></label>
    <input type="radio" name="rate" id="rate-2">
    <label for="rate-2" class="fas fa-star"></label>
    <input type="radio" name="rate" id="rate-1">
    <label for="rate-1" class="fas fa-star"></label>
    <form action="#">
      <header></header>

You need to either move your html to match or use some javascript to do so.

Answered By – scrappedcola

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published