HTML and CSS Reference
In-Depth Information
The main benefit of a class selector over the
ID selector is that multiple elements can
have the same class. Here, a third para-
graph is added:
<p class="myclass">A paragraph</p>
<p class="yourclass">Another paragraph</p>
<p class="myclass">One more paragraph</p>
It's also possible to apply multiple classes to
a single element. In the next example, the
middle paragraph has two classes applied:
<p class="myclass">A paragraph</p>
<p class="yourclass myclass">Another
<p class="yourclass">One more paragraph</p>
The .myclass selector selects all the elements
that have myclass as one of the values in the
class attribute.
Although the previous examples use paragraph elements, it isn't neces-
sary for all elements with a particular class to be of the same type. This
allows you to use the semantically correct element for a given bit of
content but style related items uniformly. In the source code for this
appendix, you'll find two additional examples of the class selector that
demonstrate this: class-selectors-4.html and class-selectors-5.html.
Now that you have a basic grasp of simple selectors, the next section
will look at ways of combining them with combinators to make more
complex selectors.
Combinators allow simple selectors, like the element, ID , and class selec-
tors in the previous sections, to be combined into more complex rules.
This makes it easy to apply one style to <link> elements in the main con-
tent but different styles to links in the navigation or the page footer.
The most common combinator in CSS is the descendant combinator : a
space between two simple selectors. For the selector to match the
Search WWH ::

Custom Search