|
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 }
|