Attribute selector patterns
Learn [attr^=], [attr$=], [attr*=] patterns.
Three patterns: ^, $, *
Attribute selectors do not match only the exact value. Three patterns look at a part of the attribute value: ^ for prefix, $ for suffix, * for substring.
a[href^="https"] catches HTTPS links, a[href$=".pdf"] catches PDF links, a[href*="login"] catches any link containing 'login'. These patterns are ideal for styling links by type and appear often in real themes.
Which pattern for which job?
All three patterns are written the same way: attribute name, sign, equals, and a quoted value inside square brackets. Only the sign changes.
[class^="btn-"] catches classes starting with 'btn-'; [src$=".webp"] catches WebP images; [href*="map"] catches any link containing 'map'. Each has a different use, and all appear often in real sites.
Exercise Mark PDF links
Write an a[href$=".pdf"] selector and add color: maroon inside. PDF links will stand out in a different color.
Show example solution
/* color the pdf links */
a[href$=".pdf"] {
color: maroon;
}Test yourself
-
Which links does this selector catch?
a[href^="https"] { color: green; }- Links without an href attribute
- Links whose href ends with 'https'
- Links whose href contains 'https'
- Links whose href starts with 'https'
Show answer
Links whose href starts with 'https' — Correct. ^ matches the prefix; only links starting with 'https' are caught.
-
Select HTTPS links
a____ { color: green; }Show answer
a[href^="https"] { color: green; } -
Match each pattern to what it catches
- a[href^="https"]
- Link starting with https
- a[href$=".pdf"]
- Link ending with .pdf
- a[href*="login"]
- Link containing login
- a[href]
- Any link