Selectors 25
Figure 3-2: More examples of link icons with the
Beginning Selector
Of course, the Beginning Selector also has many applications with
attributes—such as alt, cite, and title—that accept more verbose values.
And with the introduction of HTML5 and a whole range of new form ele-
ments and attributes, this selector and its soon-to-be-introduced siblings
will become even more useful.
Consider, for example, the proposed datetime attribute, which accepts
date-string values such as 2015-03-14:
<time datetime="2015-03-14">March 14/time>
This means that you could use the Beginning Selector to apply styles to
all elements meeting a supplied year value, which is quite handy for calen-
dar or archiving applications:
[datetime^='2015'] {...}
Ending Substring Attribute Value Selector
The Ending Selector, as I call it, works exactly like the Beginning Selector—
just the other way around! That is, you use it to select attributes that end
with the supplied value. The syntax differs by just one character: This time
you use the dollar sign character ($) to modify the equal sign (=). Here’s
the full syntax:
E[attr$='value'] {...}
Let’s look at the markup example from the previous section again, only
this time apply the Ending Selector along with a new value:
a[title$='library'] {...}
This time the rule applies to all of the list items, as all of their title
attribute values end with the string library.
