HTML and CSS Reference
In-Depth Information
On a purely syntactical level, the dot-class notation (e.g.,
.warning
) is not guaranteed
to work for XML documents. As of this writing, the dot-class notation works in HTML,
SVG, and MathML, and it may well be permitted in future languages, but it's up to
each language's specification to decide that. The hash-ID notation (e.g.,
#lead
) will
work in any document language that has an attribute that enforces uniqueness within
a document. Uniqueness can be enforced with an attribute called
id
, or indeed anything
else, as long as the attribute's contents are defined to be unique within the document.
Attribute Selectors
When it comes to both class and ID selectors, what you're really doing is selecting
values of attributes. The syntax used in the previous two sections is particular to HTML,
XHTML, SVG, and MathML documents (as of this writing). In other markup lan-
guages, these class and ID selectors may not be available (as, indeed, those attributes
may not be present). To address this situation, CSS2 introduced
attribute selectors
,
which can be used to select elements based on their attributes and the values of those
attributes. There are four general types of attribute selectors: simple attribute selectors,
exact attribute value selectors, partial-match attribute value selectors, and leading-
value attribute selectors.
Simple Attribute Selectors
If you want to select elements that have a certain attribute, regardless of that attribute's
value, you can use a simple attribute selector. For example, to select all
h1
elements
that have a
class
attribute with any value and make their text silver, write:
h1[class] {color: silver;}
So, given the following markup:
<h1 class="hoopla">Hello</h1>
<h1>Serenity</h1>
<h1 class="fancy">Fooling</h1>
…you get the result shown in
Figure 1-9
.
Figure 1-9. Selecting elements based on their attributes
