We can style HTML elements that have specific attributes or attribute values.
We can put the attribute value in single-quotes or double-quotes. It will work without quotes, but it’s not valid as per the CSS standard.
| Selector | Remarks |
|---|---|
| [attribute] | Element with attribute |
| [attribute='value'] | Where attribute has value attr_value |
| [attribute~='value'] | Where value containing a specified word. |
| [attribute^='value'] | Where attribute’s value begins with attr_value |
| [attribute$='value'] | Where attribute’s value ends with attr_value |
| [attribute*='value'] | Where attribute contains any_value anywhere |
| [attribute|='value'] | Used to select elements with the specified attribute starting with the specified value. |
| [attribute='value' i] | Where attribute has value value, ignoring attr_value’s letter casing. |
Examples
[attribute]
[attribute = "value"]
[attribute *= "value"]
[attribute ~= "value"]
[attribute ^= "value"]
[attribute $= "value"]
[attribute |= "value"]
[attribute="value" i]
