DEV Community

Linda
Linda

Posted on • Updated on

Advanced Styling using CSS Attribute Selectors

CSS code snippet

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;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

[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.
Enter fullscreen mode Exit fullscreen mode

Example

<img src="./../../images/paper.png" alt="paper"/> // ✅ Selected, has yellow border
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

[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;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

[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;
}
Enter fullscreen mode Exit fullscreen mode

Example

<img src="./../../images/hat.png" alt="hat"/> // ✅ Selected, has yellow border
<img src="./../../images/ronaldo.png" alt="hatrick"/> // ✅ Selected, has yellow border
Enter fullscreen mode Exit fullscreen mode

[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;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

[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;
}
Enter fullscreen mode Exit fullscreen mode

Example

<img src="./../../images/banner.png" alt="education"/> // ✅ Selected, has yellow border
<img src="./../../images/linda.png" alt="hand-lotion"/> // ✅ Selected, has yellow border

Enter fullscreen mode Exit fullscreen mode

Read other articles

Top comments (9)

Collapse
 
gedalyakrycer profile image
Gedalya Krycer

Awesome! I will definitely be referring back to this in the future. :)

Collapse
 
lindaojo profile image
Linda

Thanks!

Collapse
 
codeebullient profile image
Ebullient

Really helpful.

Collapse
 
lindaojo profile image
Linda

Thanks!

Collapse
 
maronkoders profile image
Brian Thomas HyfosII

This is quite insightful.. Thanks a million times

Collapse
 
shaileshcodes profile image
Shailesh Vasandani

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!

Collapse
 
lindaojo profile image
Linda

You are welcome.

Collapse
 
szhabolcs profile image
Nagy Szabolcs

Really cool and really helpful!
Thank you 😄

Collapse
 
lindaojo profile image
Linda

You are welcome