How to style your lists properly

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

When implementing the code above, I used to implement it as follows:

ul li {
	list-style-type: square;
}

ol li {
	list-style-type: 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-type: square;
}

ol {
	list-style-type: decimal;
}

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

(Click for demo)