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

HTML-CSS
1

Tell us what’s happening:

For some reason I’m failing the test that requires links to have an outline when focused. No matter what I try, the “focused” outline doesn’t seem to change, but it does create one when I change places using the tab key.

Is there something I’m missing?

Your code so far

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

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

<body>
    <h1>To Do List</h1>
    <ul class="todo-list">

        <li>
            <input type="checkbox" id="slay-check">
            <label for="slay-check">Be Slay</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.tumblr.com/dashboard/following" target="_blank">Slay Club</a></li>
            </ul>
        </li>

        <li>
            <input type="checkbox" id="game-check">
            <label for="game-check">Play Games</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.tumblr.com/dashboard/following" target="_blank">Game Club</a></li>    
            </ul>
        </li>

        <li>
            <input type="checkbox" id="cat-check">
            <label for="cat-check">Pet a cat</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://www.tumblr.com/dashboard/following" target="_blank">Pet Shelter</a></li>    
            </ul>
        </li>

        <li>
            <input type="checkbox" id="crime-check">
            <label for="crime-check">Do crimes</label>
            <ul class="sub-item">
                <li>
                    <a class="sub-item-link" href="https://www.tumblr.com/dashboard/following" target="_blank">Crime Shelter</a>
                </li>    
            </ul>
        </li>
</ul>
</body>

</html>

/* file: styles.css */
.todo-list {list-style: none;
font-family:helvetica;}

.sub-item-link{
  text-decoration:none;
}

body{background-color:grey;}


h1{text-align:center;}

ul{background-color:rgb(200, 181, 181);text-align:center;
padding:20px;}

a:hover{
  color:red;
}

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

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

.sub-item-link:focused{outline: 3px solid red;}

.sub-item{list-style:inside;}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0

Challenge Information:

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

2

Hi and welcome to the forum!
The correct syntax is focus not focused.
I hope this helps.

1 Like