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

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;

CodePudding user response：

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 >
    <input type="radio" name="rate" id="rate-5">
    <label for="rate-5" ></label>
    <input type="radio" name="rate" id="rate-4">
    <label for="rate-4" ></label>
    <input type="radio" name="rate" id="rate-3">
    <label for="rate-3" ></label>
    <input type="radio" name="rate" id="rate-2">
    <label for="rate-2" ></label>
    <input type="radio" name="rate" id="rate-1">
    <label for="rate-1" ></label>
    <form action="#">
      <header></header>

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

CodePudding user response：

if you check the original code https://codepen.io/Vlad3356/pen/PoReJVg

this is what make the trick

#rate-1:checked ~ form header:before{
  content: "I just hate it ";
}
#rate-2:checked ~ form header:before{
  content: "I don't like it ";
}
#rate-3:checked ~ form header:before{
  content: "It is awesome ";
}
#rate-4:checked ~ form header:before{
  content: "I just like it ";
}
#rate-5:checked ~ form header:before{
  content: "I just love it ";
}
.container form{
  display: none;
}
input:checked ~ form{
  display: block;
}

it displays the form if the checkbox is checked otherwise it's hidden