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

HTML-CSS
1

Tell us what’s happening:

All my test are passing except for test number 14 saying there should be no text decoration although in my CSS I’ve done the code to remove text decoration but still it is failing it. Need assistance.

Your code so far

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

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

<body>
    <ul class="todo-list">
        <li>
            <input type="checkbox" id="task1">
            <label for="task1">Task 1</label>
            <ul class="sub-item">
                <li><a href="https://example.com/1" class="sub-item-link" target="_blank">Subtask 1 Link</a></li>
            </ul>
        </li>
        <li>
            <input type="checkbox" id="task2">
            <label for="task2">Task 2</label>
            <ul class="sub-item">
                <li><a href="https://example.com/2" class="sub-item-link" target="_blank">Subtask 2 Link</a></li>
            </ul>
        </li>
        <li>
            <input type="checkbox" id="task3">
            <label for="task3">Task 3</label>
            <ul class="sub-item">
                <li><a href="https://example.com/3" class="sub-item-link" target="_blank">Subtask 3 Link</a></li>
            </ul>
        </li>
        <li>
            <input type="checkbox" id="task4">
            <label for="task4">Task 4</label>
            <ul class="sub-item">
                <li><a href="https://example.com/4" class="sub-item-link" target="_blank">Subtask 4 Link</a></li>
            </ul>
        </li>
    </ul>
</body>

</html>

/* file: styles.css */
.sub-item-link:link {
    color: red;
    text-decoration: none;
}

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

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

.sub-item-link:focus {
    outline: 2px solid#ff9800;
    outline-offset: 2px;
    text-decoration: none;
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36 OPR/127.0.0.0

Challenge Information:

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

2

Welcome to the forum @khalidsheikh2209 !

Try creating a selector on .sub-item-link for that without applying a pseudo class.

Happy coding!

4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.