How to style your lists properly

The way I used to style lists, was to set the list-type on the listitem (<li>). For uls I – evidently – chose list-style: square; and for ols I chose list-style: decimal;. I know, very basic but don’t run away yet, I’m trying to get somewhere here

When implementing the code above, this would result in this snippet of CSS code:

ul li {
	list-style: square;
}
ol li {
	list-style: decimal;
}

Lists do indeed show up fine, but – however – when nesting lists, things go wrong, and you’ll get a result like the one below:

(Click for demo)

The reason things go wrong is that the last CSS rule (ol li { ... }) overwrites the first one (ul li { ... })

Yes I know this can quickly be overridden by adding some extra selectors like ul ol li { ... } and ol ul li { ... } yet the problem will remain there when having a third nested level.

The correct way to do it is to set your list-style declarations directly on the ul and ol elements, as shown below:

ul {
	list-style: square;
}
ol {
	list-style: decimal;
}

This will result in a correct numbering/bulleting when having nested lists:

(Click for demo)