HTML and CSS Reference
In-Depth Information
CSS Selectors
CSS supports a rich set of selectors for specifying to which particular element(s) a CSS rule
applies. CSS1 initially supported basic selectors to indicate a particular tag, group of tags, or
position in the document tree. CSS2 expanded this to address selecting on attributes and
more positions in the tree. We show here pieces of CSS3, which has gone somewhat
overboard by making selector syntax at times potentially quite confusing, particularly when
chained excessively. Given that many browsers support this emerging selector syntax, it is
important to show it together with the other selectors as a complete reference. Table 5-5
summarizes the selector syntax from CSS1, CSS2, and the commonly supported parts of the
CSS3 specifications. A summary and expansion of CSS3 selectors to include those that are
less supported is provided in Chapter 6.
Selector
Description
Example
Defined In
Selects all elements of
the name E specified in
the rule
CSS1
E
h1 {color: red;}
/* makes all h1 tags red */
*
Selects all elements
* {color: blue;}
/* makes all elements blue */
CSS2
E, F, G
Applies the same
rules to a group of
tags E, F, and G
h1,h2,h3 {background-color:
orange;}
/* sets the background color of
all h1, h2, and h3 elements to
orange */
CSS1
#id
Selects any tag with an
id attribute set
#test {color: green;}
/* makes a tag with id='test'
green */
CSS1
E#id
Selects the specified
element E with the
given id attribute set
h3#contact {color: red;}
/* sets the color to red on the h3
tag with the id equal to contact */
CSS1
.class
Selects all tags with
the specified class
value
.note {color: yellow;}
/* makes all tags with
class='note' yellow */
CSS1
E.class
Selects the specified
elements of type E with
a particular class value
h1.note {text-decoration:
underline;}
/* underlines all h1 tags with
class='note' */
CSS1
E F
Selects descendent
tags where F is a
descendent some time
from element E
p strong {color: purple;}
/* sets all strong tags that are
descendents of p tags purple */
CSS1
T ABLE 5-5 CSS Selectors (continued)
Search WWH ::




Custom Search