Chapter 4
article h1). However, that’s some pretty deep nesting and an overly complex selector. In those cases
you’d be better off using a class or ID selector on a parent element to establish that heading’s context.
For example, a deep-nested article in an aside might be marked up like this:
<article>
...
<section>
...
<aside class="notes">
<article>
<h1>Note Title</h1>
<p>Tangential note.</p>
</article>
</aside>
</section>
</article>
With the “notes” class as a selector, the style rule for those headings could be much simpler:
.notes h1 { font-size: 100%; }
Rather than traversing a long series of nested elements, this rule simply styles any h1 that is a descendant
of any element belonging to the “notes” class, whether that element is an aside, a section, a div, or
anything else. A good rule of thumb: use the simplest and least specific selector possible to do the job.
Complex descendant selectors can be powerful and precise, but they can also be fragile because they
demand a very particular markup structure. Simply adding a (hopefully meaningful) class selector is
simpler, cleaner, and more flexible.
Styling Lists
Lists are useful elements in HTML. It’s the right tool to reach for any time you need to arrange connected
portions of content into a sequence of memorable chunks. Unfortunately, lists aren’t terribly attractive by
default, but you have the power of CSS on your side to compensate for their aesthetic shortcomings.
Changing Unordered List Markers
A special character marks each item in an unordered list to help the reader distinguish one item from the
next. The list marker you’re probably most familiar with is the bullet: a solid dot that’s the same color as the
list’s text. CSS includes a few predefined alternative list markers, declared using the list-style-type
property: disc (this is the default bullet), circle (an empty circle), or square (a solid square). The size of
the marker is proportional to the text size. Listing 4-52 demonstrates the list-style-type property,
replacing the standard round disc with a small square (see the results in Figure 4-40).
Listing 4-52. Using the list-style-type property
ul {
list-style-type: square;
}
