Custom bullets in multi-level unordered lists in CSS

Two versions; the first for browsers with child selector support, the second for those without.

Child selector version

/* List base styles */
ul, ol, li {margin:0.5em 0;padding:0;}
ul {list-style-type:none;}
ol {padding-left:2.5em;}

/* Level 1 unordered list */
ul > li {background:transparent url(img/bullet-1.png) no-repeat 9px 3px;}

/*Level 2 unordered list*/
ul > li > ul > li {background:transparent url(img/bullet-2.png) no-repeat 9px 3px;}

No child selector version

Useful when supporting child-selector-less browsers like IE6.

/* List base styles */
ul, ol, li {margin:0.5em 0;padding:0;}
ul {list-style-type:none;}
ol {padding-left:2.5em;}

/* Level 1 unordered list */
ul li,
li ul li,
li li ul li,
li li li ul li {padding-left:3em;background:transparent url(img/bullet-1.png) no-repeat 9px 3px;}

/* Level 2 unordered list */
ul ul li,
li ul ul li,
li li ul ul li {padding-left:3em;background:transparent url(img/bullet-2.png) no-repeat 9px 3px;}

/* Ordered list corrections */
ol li,
li ol li,
li li ol li,
li li li ol li {padding-left:0.5em;background:none;}