CSS Attribute Selectors Tutorial
Learn All About Styling with CSS Attribute Selectors
In this article, we’ll be learning all about attribute selectors. If you remember from HTML, elements can have attributes that give extra details.
An a tag with an href attribute:
We use CSS attribute selectors to target these elements with their specific attributes. For example:
Here we have an exact match selector, it will only select links with the exact href attribute value of "rembertdesigns.co".
So let’s learn how to use these very useful selectors!
Types of attribute selectors
There are many different types of attribute selectors, which are classified as either presence and value selectors or substring matching selectors.
The syntax for each selector starts with the attribute name and ends with an equal sign followed by the attribute value(s), usually in quotes.
It’s what goes between the attribute name and equals sign, that determines the selector type!
Presence and value selectors
These selectors will select an element based on the presence of an attribute alone (e.g. href), or on various different matches against the value of the attribute.
[attr] The attribute itself.
Matches all elements with an attribute-name of attr. Such as a[title].
[attr=”value”] The attribute has this exact value.
Matches all elements with an attribute-name of attr whose value is exactly value — the string inside the quotes. Such as a[href="https://rembertdesigns.co"].
[attr~=”value”] The attribute has this value in a space-separated list.
Matches elements with an attribute-name of attr whose value is exactly value, or elements with an attr attribute containing one or more values, at least one of which matches value.
In a list of multiple values, the separate values are whitespace-separated. For example, img[alt~="dough"] will select images with the alt text “making dough” and “dough types”, but not "doughnuts".
[attr|=”value”] The first attribute value in a dash-separated list.
Matches all elements with an attribute-name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen. For example, li[attr-years|="1990"] will select list items with a attr-years value of "1990-2000", but not the list item with a attr-years value of "1900-1990".
Substring matching selectors
Substring selectors allow for more advanced matching inside the value of your attribute. For example, if you had classes of message-warning and message-error and wanted to match everything that started with the string "message-", you could use [class^="message-"] to select them both!
[attr*=”value”] The attribute value contains this value.
Matches all elements with an attribute-name of attr whose value contains at least one occurrence of the substring value anywhere within the string. For example, img[alt*="dough"] will select images containing the alt text “dough”. So “making dough”, “dough types” and “doughnuts” would all be selected.
[attr^=”value”] The attribute starts with this value.
Matches any elements with an attribute-name of attr whose value has the substring value at the start of it. eg li[class^=”message-”].
[attr$=”value”] The attribute ends with this value.
Matches any elements with an attribute-name of attr whose value has the substring value at the end of it. For example, a[href$="pdf"] selects every link that ends with .pdf.
Case sensitivity
All the checks so far have been case sensitive.
If you add an i just before the closing bracket, the check will be case insensitive. It’s supported by most browsers but not all, check https://caniuse.com/css-case-insensitive.
Combining attribute selectors
Attribute selectors can also be combined with other selectors, such as tag, class, or ID.
And multiple attribute selectors can be combined:
Here we select all images with alt text including the word “city” as the only value or a value in a space-separated list, and an src value that includes the value "Europe".
And that’s it for today! We’ve covered the fundamentals of attribute selectors. Including presence and value selectors, substring matching selectors, adding case sensitivity, and combining selectors.
If you liked this post, make sure to follow me on Twitter where I post daily about Tech related things!
buymeacoffee.com/rembertdesigns