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
paragraph</p>
<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
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