Page is a not externally linkable
SuzyUK - 10:08 pm on Sep 13, 2004 (gmt 0)
2. Shorthand Properties continued.. list-style Shorthand list-style {<list-style-type> <list-style-position> <list-style-image>;} the individual properties are not seperated by commas, can be used in any order and all parts are optional ~ but if an individual property is not declared they are still understood to be there and an element will take on their individual defaults instead. Example: is the equivalent of: Example 2: is the equivalent of: Note: setting a If you only require to override one part of a setting the has been set using shorthand earlier in the cascade you should use a longhand list-style property as this will only affect that particular property. Example: Note: will set both <list-style-type> and <list-style-image> to none Note: <li> items will inherit ... more to follow ....
Tips 'n'Tricks: Part 5
ul {
list-style {square inside none;}
}
ul {
list-style-type: square;
list-style-position: inside;
list-style-image: none;
}
ul {
list-style: square;
}
ul {
list-style-type: square;
list-style-position: outside;
list-style-image: none;
} list-style using a shorthand property later in the cascade will override more explicit settings from earlier on. e.g. the second example if used after the first will reset values (back to default) from the first even though they're not declared.
ul {
list-style-type: disc;
}
ul {
list-style: none;
} list-style values from their <ol> and <ul> parent elements and setting the list style on a <ul> or an <ol> is the recommended way to control the overall lists, then descendant selectors (specificity) will enable you to target individual <li> elements if required.
Example:
ol ol li {list-style: disc;}
ul li {list-style: square;}
Brought to you by WebmasterWorld: http://www.webmasterworld.com