A common form of ul notation is to use a bullet for the first, level, and a dash for the second level.
How do you do this (simply?) using CSS?
-Marshall Schor
How do you do this (simply?) using CSS?
-Marshall Schor
Forum › How do I...?
ul bullets and dashes
This should do the trick:
The above CSS rules specify that a disc (bullet) should be used for list items, but a list within a list should use a hyphen instead.
However, you may find that Prince insists on using the UNICODE hyphen character (U+2010) that does not exist in all fonts, leading to the second rule producing question marks instead of hyphens. A workaround is to specify the second rule like this:
This rule directly specifies the content of the list item marker and can be used to place any text there at all. (Perhaps it would be useful if any text could be used for the list-style-type property as well, something for us to consider).
Another point worth mentioning is that in some situations it can be more convenient to select the list using an explicit class name rather than using descendent selectors, to make it more obvious what is going on:
ul { list-style-type: disc }
ul ul { list-style-type: hyphen }The above CSS rules specify that a disc (bullet) should be used for list items, but a list within a list should use a hyphen instead.
However, you may find that Prince insists on using the UNICODE hyphen character (U+2010) that does not exist in all fonts, leading to the second rule producing question marks instead of hyphens. A workaround is to specify the second rule like this:
ul ul li::marker { content: "-" }This rule directly specifies the content of the list item marker and can be used to place any text there at all. (Perhaps it would be useful if any text could be used for the list-style-type property as well, something for us to consider).
Another point worth mentioning is that in some situations it can be more convenient to select the list using an explicit class name rather than using descendent selectors, to make it more obvious what is going on:
ul.bullet { list-style-type: disc }
ul.hyphen > li::marker { content: "-" }
<ul class="bullet">...
Thanks, Mike, for your reply on this. I was using as my CSS reference, the CSS 2.1 spec (http://www.w3.org/TR/CSS21). It says the allowed values for list-style-type are disc, circle, and square (plus a bunch for ordered lists). hyphen isn't mentioned.
I see in the Prince documentation, that the allowed values for list-style-type for ul lists are disc, hyphen (and maybe asterisks?).
Re: Your suggestion to use :marker - I looked in the CSS 2.1 ref, and couldn't find it defined. The Prince docs just say it's used to apply styles to list markers. It wasn't obvious to me that content: was an allowed list-marker style.
I'm wondering if you have a better web reference to suggest for CSS than the one I am using because it seems to be missing a lot.
-Marshall Schor
I see in the Prince documentation, that the allowed values for list-style-type for ul lists are disc, hyphen (and maybe asterisks?).
Re: Your suggestion to use :marker - I looked in the CSS 2.1 ref, and couldn't find it defined. The Prince docs just say it's used to apply styles to list markers. It wasn't obvious to me that content: was an allowed list-marker style.
I'm wondering if you have a better web reference to suggest for CSS than the one I am using because it seems to be missing a lot.
-Marshall Schor
Hi Marshall,
Prince 5.1 supports most of CSS 2.1, with only a few remaining unsupported features which we hope to support in a future release. Prince also supports some new features defined in CSS 3 modules, including:
* Lists, for ::marker and some additional list style types.
* Selectors, which are nearly all supported.
* Multi-column layout, for the column-* properties.
* Paged Media, for named pages and page margin boxes.
* Text, for some miscellaneous text properties.
A complete list of the CSS 3 modules under development at the W3C is available here. Note that browsers are also beginning to support features from CSS 3, such as attribute selectors and multi-column layout in Firefox. However, these features are still quite new and thus not as well documented online as features from CSS 1 and 2 which have been in use for ten years now.
Prince 5.1 supports most of CSS 2.1, with only a few remaining unsupported features which we hope to support in a future release. Prince also supports some new features defined in CSS 3 modules, including:
* Lists, for ::marker and some additional list style types.
* Selectors, which are nearly all supported.
* Multi-column layout, for the column-* properties.
* Paged Media, for named pages and page margin boxes.
* Text, for some miscellaneous text properties.
A complete list of the CSS 3 modules under development at the W3C is available here. Note that browsers are also beginning to support features from CSS 3, such as attribute selectors and multi-column layout in Firefox. However, these features are still quite new and thus not as well documented online as features from CSS 1 and 2 which have been in use for ten years now.