View Single Post
Old 16-02-2005, 21:19   #6
Matth
Inactive
 
Join Date: Mar 2004
Services: BB:M, TV:XL, Phone:M, Loyalty
Posts: 2,516
Matth has reached the bronze age
Matth has reached the bronze ageMatth has reached the bronze ageMatth has reached the bronze ageMatth has reached the bronze ageMatth has reached the bronze ageMatth has reached the bronze ageMatth has reached the bronze ageMatth has reached the bronze ageMatth has reached the bronze ageMatth has reached the bronze ageMatth has reached the bronze ageMatth has reached the bronze ageMatth has reached the bronze ageMatth has reached the bronze ageMatth has reached the bronze ageMatth has reached the bronze ageMatth has reached the bronze ageMatth has reached the bronze age
Re: Unordered Lists and CSS

Another subtle nuance of CSS..
UL LI would specify only List elements in an unordered list - you can als dig down to nested lists with LI LI

I just grabbed the stylesheet I was messing around with for a little redesign of one of my sites - messy, and you may wonder at some of the options, but it does demonstrate element nesting - remember, seperated by commas, is "this, this and this", while without commas, your describing a nested element - I'm guessing anything not explicitly covered uses the deepest one that encompasses it.
Another trick, combining the element and class, so that a DIV or a SPAN can both be given class=indent, and will react differently - obviously, this is for hand-edited HTML, where I just want to specify the effect I'm after, and have it applied appropriately.

/* CSS1 Style Sheet */
BODY, TABLE, TD { font: 10pt "Comic Sans MS", Arial, Sans-Serif }
BODY SMALL { color: #990000 }
H2 { font-size: 170% }
H1 { font-size: 200% ; text-align: center }
TD { padding: 1pt 4pt }
LI A { font-size: 120% }
.important, OL LI { color: #CC0033 }
LI LI { color: #000000 }
.comment, LI LI LI { color: #006600 }
.aside, LI LI LI LI { color: #996600 }
DIV.indent { margin: 0 0 1ex 4em }
SPAN.indent { margin-left: 4em }
.seperator { font-size: 120% ; color: #CCCCCC ; background-color: #006666 ; padding-left: 1ex }
.stripe { background-color: #CCCCCC }
SELECT { background-color: #99CCFF }
A:hover {background-color: #99FFCC }
TD A:hover {background-color: white }
Matth is offline   Reply With Quote