Unable to target just one unordered list in CSS

Question

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.

In CSS the comma `,` is to apply the same style to a set of elements. So `nav ul, li { ... }` applies it do both `nav ul` and `li`. The `li` is not related to the `nav ul` before-hand. — Spencer Wieczorek, Jan 16 '15 at 05:24

score 1 · Accepted Answer · answered Jan 16 '15 at 05:16

1

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

answered Jan 16 '15 at 05:16

danielnixon

4,178
1
27
39

score 0 · Answer 2 · answered Jan 16 '15 at 05:17

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>

Unable to target just one unordered list in CSS

2 Answers2