CSS Master

$= matcheswhenthesubstringsitsattheendofthestring.

*= matcheswhenthesubstringispresentatanypositionwithinthestring.

Whenmighttheseselectorscomeinhandy?Thinkaboutlinksusingtel:(non-

standard)ormailto:."Sincetheybehavedifferentlyfromotherhyperlinks,itmakes

sensetostylethemdifferentlyjustasahinttotheuser.TaketheCallthisbusiness

link:

<a href="tel:+14045555555">Call this business</a>

Wecanselectthisandothertel:linksbyusingthe^=charactersequence:

[href^="tel:"].Let’saddsomedeclarations:

01-selectors/attribute-substring-combinator.html (excerpt)

[href^="tel:"] {

background: #2196f3 url(../images/phone-icon.svg) 10px center /

➥ 20px auto no-repeat;

border-radius: 100px;

padding: .5em 1em .5em 2em;

}

YoucanseetheresultinFigure1.10.

Figure 1.10. Our new Call this business button

Tomatchelementswhentheattributevalueendswithasubstring,change^to$.

If, for some odd reason―and let me emphasize that it would be odd―we wanted

to match the last four digits of our phone number (5555), we might use the following:

18 CSS Master