Professor: I’m sorry to interrupt you, but the name of your underlin e cla ss could
have been better chosen. It does not r eflect the semantic meaning but it spe aks of
presentation. You heard ab out that the last time. A better name would be, for example,
horizontal to denote that th is is a horizontal header. Please continue.
Mike: Then there is a table number, for which there’s no special HTML element. So
we simply used the generic <span> element and applied a class to it, which we named
tablenum.
Maria: We’re particu la rly proud of the last of the rules. We noticed that the heading as
well as the list of the links above are all presented in small caps. So we constructed a
group selector with two selectors: an ord inary element selector (h1) and a descendant
selector (li a) specifying to style only the <a> elements within the <li> elements.
Professor: Splendid ! There is, however, one tiny detail that you overlooked. There
could be other lists in a document that weren’t navigation bars but no rmal lists. If they
contained links, those links would appear in small cap s as well.
You could rewrite your last rule to read something like this:
h1, .navbar a {
font-variant: small-caps;
}
And th e corresponding HTML portion as:
<ul class="navbar">
<li><a href="#">Donec molestie leo magna</a></li>
<li><a href="#">Nunc lacinia nisi sed</a></li>
<li><a href="#">Pellentesque egestas</a></li>
</ul>
Note that it doesn’t really matter whether you start your descendant selector with
an <li> or <ul > element because an <ul > element ca n contain only <li> elements
anyway.
What’s mo re, you could even use the <nav> HTML5 element, which is used for cr e-
ating a navigation section on a page, as a wr apper arou nd the < ul> element. Like
this:
<nav>
<ul>
<li><a href="#">Donec molestie leo magna</a></li>
<li><a href="#">Nunc lacinia nisi sed</a></li>
<li><a href="#">Pellentesque egestas</a></li>
</ul>
</nav>
And th e CSS portion:
5.1. Homework Discussion 73