Designing a Web Page with CSS - HTML, CSS, and Dynamic HTML - page 169

where elem is the name of the element. Thus, the style rule

h1.intro {color: blue;}
causes the text of all h1 headings that belong to the intro class to appear in blue.
While id and class are the most common attributes to use with selectors, any
attribute or attribute value can be the basis for a selector. Figure 3-23 lists the selector
patterns that are based on attributes and their values.

Figure 3-23 Attribute selectors

Selector Description Example Matches

#id

The element with the id
value, id

#intro

The element with the
id intro

.class

All elements with the
class value, class

.main

All elements belong-
ing to the main class

elem.class

All elem elements with
the class value class

p.main

All paragraphs
belonging to the
main class

elem [ att ]

All elem elements
containing the att
attribute

a[href]

All hypertext elements
containing the href
attribute

elem [ att= ” text ”]

All elem elements
whose att attribute
equals text

a[href=”gloss.htm”]

All hypertext elements
whose href attribute
equals gloss.htm

elem [ att~ =” text ”]

All elem elements whose
att attribute contains
the word text

a[rel~=”glossary”]

All hypertext elements
whose rel attribute
contains the word
glossary

elem [ att| =” text ”]

All elem elements whose
att attribute value is
a hyphen-separated
list of words beginning
with text

p[id|=”first”]

All paragraphs whose
id attribute starts
with the word first in
a hyphen-separated
list of words

elem [ att^ =” text ”]

All elem elements whose
att attribute begins
with text (CSS3)

a[rel^=”prev”]

All hypertext elements
whose rel attribute
begins with prev

elem [ att $=” text ”]

All elem elements whose
att attribute ends with
text (CSS3)

a[href$=”org”]

All hypertext elements
whose href attribute
ends with org

elem [ att *=” text ”]

All elem elements whose
att attribute contains
the value text (CSS3)

a[href*=”faq”]

All hypertext elements
whose href attribute
contains the text
string faq

All current browsers support the attribute selector patterns listed in Figure 3-23; be
aware, however, that some older browsers—primarily IE6—may not support these selec-
tors in your style sheets.