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:
<a href="https://easeout.co">This is a link</a>
We use CSS attribute selectors to target these elements with their specific attributes. For example:
a[href="https://easeout.co"] {
color: #FFFF00;
}
Here we have an exact match selector, it will only select links with the exact href
attribute value of "https://easeout.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 equals 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://easeout.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/#feat=css-case-insensitive.
Combining attribute selectors
Attribute selectors can also be combined with other selectors, such as tag, class, or ID.
div[attr="value"] {
/* style rules */
}
.item[attr="value"] {
/* style rules */
}
#header[attr="value"] {
/* style rules */
}
And multiple attribute selectors can be combined:
img[alt~="city"][src*="europe"] {
/* style rules here */
}
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 a 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.
Related Posts:
A little about me..
Hey, Iâm Tim! đ
Iâm a freelance business owner, web developer & author. I teach both new and experienced freelancers how to build a sustainable and successful freelancing business. Check out my Complete Guide to Freelancing if you'd like to find out more.
While you're here, you can browse through my blogs where I post freelancing tips, code tutorials, design inspiration, useful tools & resources, and much more! You can also join the newsletter, or find me on X.
Thanks for reading! đ