Parent <ul> overriding its childs styling

Question

This is my markup:

<div id="nav">
    <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li>
            <a href="#">Articles</a>
            <ul class="inside-ul">
                <li><a href="#">Article 1</a></li>
                <li><a href="#">Article 2</a></li>
                <li><a href="#">Article 3</a></li>
            </ul>
        </li>
        <li><a href="#">Page 3</a></li>
    </ul>
</div>

I apply styling to the parent <ul> like this:

#nav ul {
    something;
}

#nav ul li {
    something;
}

#nav ul li a {
    something;
}

And I apply styling to the child <ul> like this:

.inside-ul {
    something;
}

.inside-ul li {
    something;
}

.inside-ul li a {
    something;
}

But the problem is, the child <ul> (.inside-ul) doesn't change at all, it's like it inherits everything from its parent. I have tried using !important in my CSS file but it still remains the same.

Here is an image of what's happening:

http://i47.tinypic.com/w1brkw.jpg

I hope I've explained myself clearly, thanks.

Answer 1

Change

#nav ul {
    something;
}

to

#nav > ul {
    something;
}

That way the CSS is only applied to the child UL of #nav and not the sub UL.

Answer 2

Have you made sure that the most important ones come last? The .inside-ul should come after the #nav ul in the CSS file.

Answer 3

Change this:

.inside-ul {
    something;
}

.inside-ul li {
    something;
}

.inside-ul li a {
    something;
}

to this:

#nav ul.inside-ul {
    something;
}

#nav ul.inside-ul li {
    something;
}

#nav ul.inside-ul li a {
    something;
}

More specific rules (in this case rules which apply to an id (#nav) have precedence over simpler rules.

Answer 4

It is a CSS specificity issue.

Id's have a value of 100 while classes have a value of 10 and each element name has a value of 1.

So #nav ul = 101 while .inside_ul = 10

If two selectors apply to the same element, the one with higher specificity wins.

So the #nav ul styles will take precedence. You will need to use

#nav ul.inside_ul

which has a specificity of 111.