HTML and CSS Reference
In-Depth Information
Partial Attribute Values
For attributes that accept a space-separated list of words (notably, the class attribute), it is
possible to select based on the presence of a word within the list, rather than the exact match
earlier. Remember our multiple-class example:
<p class="warning help">Every 108 minutes, the button
must be pushed. Do not attempt to use the computer
for anything other than pushing the button.</p>
To select this paragraph with the exact match selector earlier, you'd need to write:
p[ class="warning help"] . Neither p[class="warning"] nor p[class="help"] would match.
However, by using the tilde-equal ( ~= ) indicator, you can select based on the presence of
a word within the space-separated list, like so:
p[class~="help"] {
color: red;
Note that this is functionally equivalent to the class selector ( p.warning or ) we
introduced earlier, and the class selector is far more widely supported. However, the partial
attribute selector also works for attributes other than class .
Particular Attribute Selector
Perhaps better named the “equal to or starts with” attribute selector, the partial attribute
selector —with its pipe-equal ( |= ) syntax—matches attribute values that either match exactly
or begin with the given text. For example:
img[src|="vacation"] {
float: left;
would target any image whose src value begins with vacation . It would match vacation/photo1.jpg
and vacation1.jpg , but not /vacation/photo1.jpg .
Attribute selectors, like adjacent sibling selectors, would be more valuable if Internet
Explorer 6 and lower supported them (again, they are supported in IE 7). Since it doesn't,
many web developers are forced to admire them from afar.
Pseudo-Classes and Pseudo-Elements
And now for something completely different. OK, not completely—but close. Pseudo-class
and pseudo-element selectors allow you to apply styles to elements that don't actually exist
in your (X)HTML document. These are structures that you may have explicitly added to your
(X)HTML document if you'd been able to predict them—but you can't. For example, it's often
helpful to style the first line of a paragraph differently than the rest. But, given the vast array of
devices, browsers, and screen sizes your site will be rendered on, there's simply no way to pre-
dict and define ahead of time what text encapsulates the first line.
Search WWH ::

Custom Search