Partial Attribute Selectors
Published on · 1 minute reading time
CSS’s attribute selectors allow partial matching of attribute values via the following selector syntax:
| Syntax | Matches | Example |
|---|---|---|
[attr~="value"] | Any element whose attribute attr contains the value value in a space-separated list of words. | <element attr="any value here" /> |
[attr*="value"] | Any element whose attribute attr contains the value substring. | <element attr="anyvaluehere" /> |
[attr^="value"] | Any element whose attribute attr starts with the value substring. | <element attr="valuehere" /> |
[attr$="value"] | Any element whose attribute attr ends with the value substring. | <element attr="anyvalue" /> |
[attr|="value"] | Any element whose attribute attr is either value or starts with the value substring and is followed by a dash. | <element attr="value" /> and <element attr="value-here" /> |
As usual, these selectors are case-sensitive.