Search code examples
htmlcss

How to use CSS ID selector?

I am a total beginner to web development. There seems to be an issue with my code since the CSS id selector is not working:

li {
  border: 3px solid red;
}

h3 {
  background: green;
}

#special {
  color: green;
}
<h3>Todo List</h3>

<ul>
  <li> <input type="checkbox" name="walkRusty"> Walk Rusty</li>
  <li> <input type="checkbox" name="buyGroceries">Buy Groceries</li>
  <li> <input type="checkbox" name="cssVideos" id="special">Finish CSS Videos</li>
</ul>

Solution

  • Your input element (checkbox) under li tag doesn't have the text you wish to style through the special ID. The text 'Finish CSS Videos' comes under li tag. The ID therefore needs to be assigned to the corresponding li tag:

    <li id="special"> <input type="checkbox" name="cssVideos" >Finish CSS Videos</li>