(Note that this is the nested list
created earlier in this chapter.)
ul {
list-style-image: url(bullet.gif);
}
Contextual selectors were first mentioned in Chapter 1
(see the section ???Types of CSS selectors???). These enable
you to style things in context, and this is appropriate when working with lists. You can style
list items with one type of bullet and nested list items with another. The original rule stays
in place but is joined by a second rule:
ul {
list-style-image: url(bullet.gif);
}
ul ul {
list-style-image: url(bullet-level-two.gif);
}
This second rule??™s selector is ul ul, which means that the declaration is applied only to
unordered lists within an unordered list (i.e., nested lists). The upshot is that the top-level
list items remain with the original custom bullet, but the nested list items now have a different
bullet graphic.
With this CSS, each subsequent level would have the nested list bullet point, but it??™s feasible
to change the bullet graphic for each successive level, by using increasingly complex
contextual selectors.
Dealing with font-size inheritance
Most of the font-size definitions in this chapter (and indeed, in this book) use relative
units. The problem with using ems, however, is that they compound. For example, if you
have a typical nested list like the one just shown, and you define the following CSS, the
first level of the list will have text sized at 1.5em; but the second-level list is a list within a
list, so its font-size value will be compounded (1.
Pages:
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186