CSS is that friend we all love and hate. Another reason to love CSS is it enables you to select elements using their attributes.
The attributes often selected for styling are "class" and "id" attribute. In this article, I will show you how to target specific elements using other attributes and their specified values.
[attribute] Selector
The [attribute] Selector selects elements with a specified attribute.
Example
img[alt] {
border: 2px solid yellow;
}
The selector above targets only images that contain the "alt" attribute so images with "alt" attribute would have a yellow border.
<img src="./../../images/dog.png" alt="cute white dog"/> // ✅ Selected, has yellow border
<img src="./../../images/cat.png"/>// ❌ not selected, no border
[attribute="value"] Selector
The [attribute="value"] selector selects elements that contain a specific attribute with an exact specified value.
Attribute value strings are by default case-sensitive, but can be changed to case-insensitive by adding 'i' before the closing bracket as shown below:
img[alt="paper"] { //Case sensitive
border: 2px solid yellow;
}
img[alt="PapEr" i] { //Case insensitive
border: 2px solid yellow;
}
The selectors above target the same elements.
Example
<img src="./../../images/paper.png" alt="paper"/> // ✅ Selected, has yellow border
The selectors above target only images that contain the "alt" attributes whose value is "paper".
[attribute*="value"] Selector
The [attribute*="value"] selector is used to select elements whose attribute value contains a specified value anywhere.
img[alt*="ter"] {
border: 2px solid yellow;
}
Example
<img src="./../../images/paper.png" alt="alter"/> // ✅ Selected, has yellow border
<img src="./../../images/paper.png" alt="termite"/> // ✅ Selected, has yellow border
<img src="./../../images/paper.png" alt="flattering"/> // ✅ Selected, has yellow border
[attribute~="value"] Selector
The [attribute~="value"] selector is used to select elements whose attribute value contains a specified word.
img[alt~="coin"] {
border: 2px solid yellow;
}
Example
<img src="./../../images/man.png" alt="coin collector"/> // ✅ Selected, has yellow border
<img src="./../../images/office.png" alt=" Buycoins Headquaters"/> // ❌ not selected, no border
[attribute^="value"] Selector
The [attribute^="value"] selector is used to select elements whose attribute value begins with a specified value.
img[alt^="hat"] {
border: 2px solid yellow;
}
Example
<img src="./../../images/hat.png" alt="hat"/> // ✅ Selected, has yellow border
<img src="./../../images/ronaldo.png" alt="hatrick"/> // ✅ Selected, has yellow border
[attribute|="value"] Selector
The [attribute|="value"] selector is used to select elements with the specified attribute starting with the specified value. In this case, the value has to be a whole word or the first word in a hyphen-separated word.
img[alt|="front"] {
border: 2px solid yellow;
}
Example
<img src="./../../images/linda.png" alt="front-end-developer"/> // ✅ Selected, has yellow border
<img src="./../../images/linda.png" alt="frontend-developer"/> // ❌ not selected, no border
<img src="./../../images/location.png" alt="front"/> // ✅ Selected, has yellow border
[attribute$="value"] Selector
The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value. The value does not have to be a whole word.
img[alt$="tion"] {
border: 2px solid yellow;
}
Example
<img src="./../../images/banner.png" alt="education"/> // ✅ Selected, has yellow border
<img src="./../../images/linda.png" alt="hand-lotion"/> // ✅ Selected, has yellow border
Top comments (9)
Awesome! I will definitely be referring back to this in the future. :)
Thanks!
Really helpful.
Thanks!
This is quite insightful.. Thanks a million times
Nice post! Great introduction for people who haven't used advanced CSS selectors yet. I'll definitely be referring back to it at some point.
Thanks so much for sharing!
You are welcome.
Really cool and really helpful!
Thank you 😄
You are welcome