Style your lists properly (Wrong)

CSS

ul li {
	list-style: square;
}

ol li {
	list-style: decimal;
}

Implementation

Ordered List in Unordered list

• Unordered List Item #1
• Unordered List Item #2
• Unordered List Item #3
  1. Nested Ordered List Item #1
  2. Nested Ordered List Item #2
  3. Nested Ordered List Item #3
• Unordered List Item #4
• Unordered List Item #5

Unordered List in Ordered list

1. Ordered List Item #1
2. Ordered List Item #2
3. Ordered List Item #3
   • Nested Unordered List Item #1
   • Nested Unordered List Item #2
   • Nested Unordered List Item #3
4. Ordered List Item #4
5. Ordered List Item #5

Reason why only the nested ul freaks out (and not the nested ol) is because of the order of the css seletors: ol is defined after ul and thus overwriting that definition

« Back to related article