HTML and CSS Reference
In-Depth Information
Classes are an HTML attribute, not a CSS
one. Although they often provide
convenient hooks for
applying CSS styles, their
role should be to give
additional semantic
information about
your content. That is,
they should describe what
your content
is
, not what
it
looks like
.
We're approaching ivorY
—
tower territory
here—most of your users won't care how that
first element is picked out. But
there are benefits to not loading
your markup with presentational
classes: smaller file sizes;
cleaner, more easily
understandable markup; and
less rework when you decide
(for example) to remove the
third element of a list you want
to style in alternating colors.
For the next few examples, we'll use a markup fragment in a style
that's commonly used for site navigation—an unordered list of links.
The screenshot shows some default styling, putting a dotted outline
around each major element so you can see where it is.
<nav>
<ul>
<li>
<a href="#item1">Item 1</a>
</li>
<li>
<a href="#item2">Item 2</a>
</li>
<li>
<a href="#item3">Item 3</a>
</li>
<li>
<a href="#item4">Item 4</a>
</li>
<li>
<a href="#item5">Item 5</a>
</li>
<li>
<a href="#item6">Item 6</a>
</li>
</ul>
</nav>
To select the first element in the list with-
out adding additional markup, you can use
the
:first-child
pseudo-class:
