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

HTML-CSS
1

Tell us what’s happening:

Test 18 ‘The links should have an outline when focused’ is not passing, but I see an outline when I hover over the links.

Your code so far

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

<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
    <link href="styles.css" rel="stylesheet"/>
</head>

<body>
<ul class="todo-list">
    <li><input type="checkbox" id="one"><label for="one">one</label> <ul class="sub-item">
        <li> 
         <a class="sub-item-link" href="www.google.com" target="_blank">Google</a>
        </li>
        </ul>
    </li>
    <li><input type="checkbox" id="two"><label for="two">two</label><ul class="sub-item">
        <li> 
         <a class="sub-item-link" href="www.fidelity.com" target="_blank">Fidelity</a>
        </li>
        </ul></li>
    <li><input type="checkbox" id="three"><label for="three">three</label><ul class="sub-item">
        <li> 
         <a class="sub-item-link" href="www.ebay.com" target="_blank">eBay</a>
        </li>
        </ul></li>
    <li><input type="checkbox" id="four"><label for="four">four</label><ul class="sub-item">
        <li> 
         <a class="sub-item-link" href="www.facebook.com" target="_blank">Facebook</a>
        </li>
        </ul></li>
    </ul>
</body>

</html>

/* file: styles.css */
a{
  text-decoration:none;
}
.sub-item-link:link{
  color: red;
}
.sub-item-link:visited{
  color:purple
}
.sub-item-link:hover {
    color: darkolivegreen;
    outline: 2px solid blue;
}

.sub-item-link:active {
    color: blue;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Challenge Information:

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

2

You’re very close, and the issue is just which pseudo-class you’re using for the outline.
Now you have pu t the outline on `:hover`.
But the test is specifically checking for an outline on focus, not hover.

3

I changed to :

.sub-item-link:focus {

color: darkolivegreen;

outline: 2px solid blue;

}

But that isn’t working either

4

removed by moderator

5

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.