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]
attributes css selectors elements html tags