How to do this i got stuck please help

HTML-CSS
1

“18. You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected. “, here’s my html

        <input type="radio" id="fulltime" name="availability" value="fulltime" required>

        <label for="fulltime">Full-Time</label>

        <input type="radio" id="parttime" name="availability" value="parttime">

        <label for="parttime">Part-Time</label>

my css

.radio-group input\[type="radio"\]:checked + label {

  color: white;

  border-color: #357abd;

  background-color: #4a90e2;

}

so why is this happening and how to fix it anyone help please thank you?

2

Hi. Welcome to the community.

Can you please post the url of the challenge you are doing and all your code so we can better assist.

When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Job Application Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Apply for a Job</h1>
    <form>
      <input type="text" id="name" name="name" placeholder="John Doe" required>
      <label for="name"id="name">Full Name</label>
      <input type="email" id="email" name="email" placeholder="john@example.com" required>
      <label for="email"id="email">Email Address</label>
      <label for="position">Position</label>
      <select id="position" name="position" required>
        <option value="">Select a position</option>
        <option value="developer">Developer</option>
        <option value="designer">Designer</option>
        <option value="manager">Manager</option>
      </select>
      <fieldset class="radio-group">
        <legend>Availability</legend>

        <input type="radio" id="fulltime" name="availability" value="fulltime" required>
        <label for="fulltime">Full-Time</label>
        <input type="radio" id="parttime" name="availability" value="parttime">
        <label for="parttime">Part-Time</label>
      </fieldset>
      <label for="message">Message</label>
      <textarea id="message" name="message" placeholder="Your message..." required></textarea>

      <button type="submit">Submit Application</button>
    </form>
  </div>
</body>
</html>

here is my css code ~~~

 .container {   max-width: 600px;   margin: 0 auto;   padding: 20px;   font-family: Arial, sans-serif; }  form label {   display: block;   margin-top: 15px;   font-weight: bold; }  input, select, textarea {   width: 100%;   padding: 10px;   margin-top: 5px;   border: 2px solid #ccc;   border-radius: 5px;   box-sizing: border-box; }  input:focus, textarea:focus {   border-color: #4a90e2;   outline: none; }  input:invalid, select:invalid, textarea:invalid {   border-color: red; }  input:valid, select:valid, textarea:valid {   border-color: green; }  button {   margin-top: 20px;   padding: 12px;   background-color: #4a90e2;   color: white;   font-size: 1em;   border: none;   border-radius: 8px;   cursor: pointer;   transition: background-color 0.3s ease; }  button:hover {   background-color: #357abd; }  .radio-group {   margin-top: 20px;   border: none;   padding: 0;   display: flex;   gap: 15px;   align-items: center;   flex-wrap: wrap; }  .radio-group input[type="radio"] {   margin-right: 5px; }  .radio-group label {   display: inline-block;   padding: 10px 20px;   border: 2px solid #ccc;   border-radius: 8px;   cursor: pointer;   transition: all 0.3s ease;   user-select: none; }  .radio-group input[type="radio"]:checked {   border-color: #357abd;   background-color: #4a90e2;   box-shadow: 0 4px 10px rgba(0,0,0,0.2); }  .radio-group input[type="radio"]:checked + label {   color: white;   border-color: #357abd;   background-color: #4a90e2; }  input:first-of-type {   border-top-left-radius: 15px;   border-top-right-radius: 15px; }

This is the error i kept getting

4

the tilde ~ is not a backtick `

please post a link to the challenge

and please share your css so it’s not all in one line, it is quite difficult to read like that