Build a Stylized To-Do List - Build a Stylized To-Do list

HTML-CSS
1

Tell us what’s happening:

Step 16 is claiming that my link doesn’t have a focus outline, even though I think I did put it in my css, not sure what to do. Any help would be much appreciated.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
  </head>
<body>
<ul class="todo-list">
 <li><input id="xbox"
 type="checkbox"/>
 <label for="xbox">Play Xbox</label>
<ul class="sub-item">
<li><a class="sub-item-link" href="google.com" target="_blank">Visit The App</a>
</li>
  </ul>
</li>

  <li>
  <input id="grandma" type="checkbox">
  <label for="grandma">Visit Grandma</label>
  <ul class="sub-item">
  <li><a class="sub-item-link" href="google.com"target="_blank">Sign Up for Nursery</a>
  </li>
    </ul>
  </li>

 <li>
   <input type="checkbox" id="play">
   <label for="play">Play Some Videos</label>
   <ul class="sub-item">
  <li> <a class="sub-item-link"  href="google.com" target="_blank">Visit Web</a></li>
     </ul>

<li>
  <input type="checkbox"
  id="freeskate"/>
  <label for="freeskate">Freeskate</label>
  <ul class="sub-item">
  <li>
  <a class="sub-item-link" href="google.com" target="_blank">Check out Freeskates</a>
  </li>
  </ul>
</li>    
 </ul>
 
 
<!--end of list!-->
</body>
   

/* file: styles.css */
 .todo-list{
list-style-type:none;
 }
 a:link{
  color:red;
 }
a:hover{
  color:green;
}
a:focus{ 
  color:blue;
}
a:active{
  color:pink;
}
a:visited{
  color:black;
}
a{
text-decoration:none;
}
a:focus{
outline: green;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Challenge Information:

Build a Stylized To-Do List - Build a Stylized To-Do list

2

Hi,
You have two a:focus selectors. Try combining them into one.
Good luck!

3

On the one hand, forcing you to not duplicate selectors is teaching you best practices. On the other hand, your code is valid and should pass as such.

It is just a side effect of how it is tested. If you switch the order of the two selectors, it would pass, because it will find the outline before the color. So it is kind of a bug, sort of.

4

Thanks I will try this

5

Thank you I will try combing them

6

Should I just test it again , or skip the project?

7

Nevermind, I got it.