Why isn't my
inheriting from my
?

Question

I've been working on this for awhile so I might just be really tired but why isn't my ul inheriting properties from my div (specifically the list-style-type). Here's my html: ``` ``` And here's the CSS: ``` #navbar { list-style-type:none; margin:0; padding:0; } ```

Accepted Answer

The `list-style-type` CSS property is an inherited property, so your `ul` is getting the style applied to it. However, there's something else at play of which you are probably not aware that is overriding it.

All browsers apply default (or "user agent") styling to elements so that there is some sort of base styling to any page, even without defined CSS (this is why CSS Resets are popular -- they get rid of default styles). What is happening here is the browser's default styles are overriding your inherited styles, because the default styles specifically target the `ul`, which gives the default styles a higher specificity than the inherited styles.

If you inspect the list (here's a fiddle) with browser developer tools (I used Chrome 31), you'll see what I explained above. I also provided a screenshot below of this.

The solution? Directly target your `ul`. Even if the selector is just `ul`, it will be applied after the default user agent styles, and so will override them (because now they have the same specificity, the last-applied rule wins).

```
#navbar ul { /* or in this case, just `ul` would work */
    list-style-type: none;
}
```

Why isn't my <ul> inheriting from my <div>?

Solution

Problem