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

Curriculum Help
,
1

Tell us what’s happening:

i dont know how my a element is failing the no text decoration test

Your code so far

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

<head>
    <meta charset="utf-8">
    <title>Styled To-Do List</title>
</head>

<body>
     <ul class="todo-list">
        <li>
            <input type="checkbox" id="todo-1">
            <label for="todo-1">Buy groceries</label>
            <ul class="sub-item">
                <li><a href="https://example.com/groceries" class="sub-item-link" target="_blank">View shopping list</a></li>
            </ul>
        </li>

        <li>
            <input type="checkbox" id="todo-2">
            <label for="todo-2">Finish project report</label>
            <ul class="sub-item">
                <li><a href="https://example.com/report" class="sub-item-link" target="_blank">Open project folder</a></li>
            </ul>
        </li>

        <li>
            <input type="checkbox" id="todo-3">
            <label for="todo-3">Go for a run</label>
            <ul class="sub-item">
                <li><a href="https://example.com/fitness" class="sub-item-link" target="_blank">Track workout</a></li>
            </ul>
        </li>

        <li>
            <input type="checkbox" id="todo-4">
            <label for="todo-4">Read new book</label>
            <ul class="sub-item">
                <li><a href="https://example.com/book" class="sub-item-link" target="_blank">View book summary</a></li>
            </ul>
        </li>
    </ul>
</body>

</html>

/* file: styles.css */
.todo-list {
    list-style: none;
    padding: 0;
}

.todo-list li {
    margin: 15px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.sub-item {
    list-style: none;
    padding-left: 20px;
    margin-top: 8px;
}

/* === LINK STYLES === */
.a.sub-item-link {
    text-decoration: none !important;
}

a.sub-item-link:link {
    text-decoration: none !important;
    color: #0066cc;
}

a.sub-item-link:visited {
    color: #8a2be2;
}

a.sub-item-link:hover {
    color: #ff6600;
}

a.sub-item-link:focus {
    outline: 2px solid #00cc00;
    outline-offset: 2px;
}

a.sub-item-link:active {
    color: #cc0000;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:151.0) Gecko/20100101 Firefox/151.0

Challenge Information:

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

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-stylized-to-do-list/66c051d13a6a20255a963695.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Welcome to the forum @DviantCodePup,

Have you linked your stylesheet in your HTMl file?

Notice that you are attempting to access the anchor element as though it’s a class here.

Happy coding