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

HTML-CSS
1

Tell us what’s happening:

Please help find errors for Step 9. I cannot figure out the step 9 problem.
Current Error messages for my Program are below:

// running tests
9. After the label elements, there should be an unordered list with the class sub-item.
10. The li inside the ul with the class sub-item should have an anchor element with the class sub-item-link.
14. Your a elements should not have any text decorations.
18. The links should have an outline when focused.
// tests completed

Your code so far

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

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

<body>
<ul class="todo-list">
    <li>
         <input id="Item 1" type="checkbox">
         <label for="Item 1">Item 1</lable>
         <ul class="sub-item">
            <li> 
                <a class="sub-item-link" href="https://www.google.com" target="_blank">Item A</a>
            </li>
        </ul>
    </li>
    <li>    
        <input  id="Item 2" type="checkbox">
        <label  for="Item 2">Item 2</lable>
        <ul class="sub-item">
            <li> 
                <a class="sub-item-link" href="https://www.google.com" target="_blank">Item B</a>
            </li>
        </ul>
    </li>
    <li>
         <input id="Item 3" type="checkbox">
         <label for="Item 3">Item 3</lable>
         <ul class="sub-item">
            <li> 
                <a class="sub-item-link" href="https://www.google.com" target="_blank">Item C</a>
            </li>
         </ul>
    </li>
    <li> 
        <input id="Item 4" type="checkbox">
        <label for="Item 4">Item 4</lable>
        <ul class="sub-item">
            <li> 
                <a class="sub-item-link" href="https://www.google.com" target="_blank">Item D</a>
            </li>
        </ul>
    </li>
         </ul>
</body>

</html>

/* file: styles.css */
a:link{
  color:green;
}
a:visited{
  color:purple;}
a:hover{
  color:orange;}
a:focused{
outline: 2px solid blue;}
a:active{color:red;}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36 Edg/148.0.0.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

I fixed Item 14 and 18 problems, the program still cannot pass Item 9 and 10.

New CSS Program:

a {text-decoration: none;}

a:link{ color:green;}

a:visited{ color:purple;}

a:hover{ color:orange;}

a:focus{outline: 2px solid blue;}

a:active{color:red;}

3

Hi @John_Zhang,

You have a typo in your label element’s closing tags.

That is not a valid pseudo class. Please check this reference.

CSS Links

You still need a CSS selector to remove text decoration from your links. The easiest way to do that is to create a selector on just the a element.

Happy coding!

4

perfect, typo fixed, all problems are fixed. Thanks for quick support!