CODEWITHSUNDEEP
htmlcsshtml-listsmarkup
user3273967
user3273967

Reputation:

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.

Upvotes: 0

Views: 507

Answers (2)

Mysteryos
Mysteryos

Reputation: 5791

Your code should be as follows:

<html>
<head>
    <style>
        nav
        {
            background-color:lightgrey;
        }
        nav ul, li
        {
            list-style:none;
            display:inline-block;
        }
        /*Targets all "li" elements that have "form" as parent*/
        form ul, 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>

Upvotes: 0

danielnixon
danielnixon

Reputation: 4268

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

Upvotes: 1

Related Questions