Search code examples
htmlcsshtml-listsmarkup

Unable to target just one unordered list in CSS


I'm trying to style two unordered lists differently on my page - no list style for the nav at the top, and regular list styling in the form.

Here's my simplified markup:

<html>
<head>
    <style>
        nav
        {
            background-color:lightgrey;
        }
        nav ul, li
        {
            list-style:none;
            display:inline-block;
        }
        form ul, li
        {
            color:red;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li>Nav Item 1</li>
            <li>Nav Item 2</li>
            <li>Nav Item 3</li>
        </ul>
    </nav>
    <form>
        <ul>
            <li>Form Item 1</li>
            <li>Form Item 2</li>
            <li>Form Item 3</li>
        </ul>
    </form>
</body>

When this is run, both the nav and form ULs are coloured red and also lack list styling.


Solution

  • Replace nav ul, li with nav ul, nav li and form ul, li with form ul, form li.