DEV Community

Neha Sharma
Neha Sharma

Posted on

CSS Attribute Selectors Demystified

Welcome to another blog to learn about css selectors. In this blog we will learn about attribute selectors.

Please check my previous post on CSS Selectors

What is attribute selector?

An attribute selector is a type of selector in CSS that selects an element based on the presence or value of a specific attribute. In other words, attribute selectors allow you to target HTML elements based on the value of their attributes.

What problem we are going to solve?

We are making a footer for a book store website. In the footer, we have a few links - social media, terms & conditions, pdf download etc. We want to add icons to these links based on their href.

eg: If it is a social media link then respective social media icon should be next to that, if it is an external link then an external link icon should be there, if it is a pdf link then pdf icon should be there.

How are we going to this by CSS?

Image description

To achieve this requirement, we will use attribute selectors. So, lets start learning it

1. Prefix match selector

In CSS, the caret (^) symbol is used as a prefix to select elements based on the beginning of their attribute values. This is called the "starts with" attribute selector.

The syntax for using the starts with attribute selector is:



[attribute^=value]


Enter fullscreen mode Exit fullscreen mode

For our requirement, we can use this selector to style all external link starting with http.



a[href^="http"] {
    padding: 30px;
    background: url(images/external.png) no-repeat left center;
    background-size: 20px;
}


Enter fullscreen mode Exit fullscreen mode


 <a href="http://terms.html">Terms</a>
    <a href="http://privacypolicy.html">Privacy</a>


Enter fullscreen mode Exit fullscreen mode

and we will have all the links with external icon.

Image description

PS: do not worry about rest of the social media links as of now. We will fix them one by one

2. Suffix match selector

In CSS, the dollar sign ($) symbol is used as a suffix to select elements based on the end of their attribute values. This is called the "ends with" attribute selector.



[attribute$=value]


Enter fullscreen mode Exit fullscreen mode

For our requirement, we can use this selector to style all link ending with .pdf, .jpeg.



a[download$="pdf"] {
    padding: 30px;
    background: url(images/pdf.png) no-repeat left center;
    background-size: 20px;
}

a[download$="jpg"] {
    padding: 30px;
    background: url(images/image.png) no-repeat left center;
    background-size: 20px;
}


Enter fullscreen mode Exit fullscreen mode


  <a download="learncss.pdf">Learn CSS</a>
  <a download="learncss.jpg">Learn CSS</a>


Enter fullscreen mode Exit fullscreen mode

and we will have different icons based on the extension.

Image description

3. Substring match selector

In CSS, the asterisk (*) symbol can also be used as a wildcard in attribute selectors to select elements with any attribute name. The syntax for using the asterisk in attribute selectors is:



[attribute*=value]


Enter fullscreen mode Exit fullscreen mode

For our requirement, we can use this selector to style all link having social media name it.



a[href*="facebook"] {
   padding: 30px;
   background: url(images/facebook.png) no-repeat left center;
   background-size: 20px;
}

a[href*="twitter"] {
    padding: 30px;
    background: url(images/twitter.png) no-repeat left center;
    background-size: 20px;
}

a[href*="instagram"] {
    padding: 30px;
    background: url(images/instagram.png) no-repeat left center;
    background-size: 20px;
}


Enter fullscreen mode Exit fullscreen mode


      <a href="http://facebook.com">facebook</a>
    <a href="http://twitter.com">twitter</a>
    <a href="http://instagram.com">instagram</a>


Enter fullscreen mode Exit fullscreen mode

and we will have different icons based on the social media name in href.

Image description

And we have met our requirement by using attribute selectors.

Bonus selectors

4. Exact match selector

In CSS, the equal (=) symbol can be used in attribute selectors to select elements with exact attribute name. The syntax for using the equal in attribute selectors is:



[attribute=value]


Enter fullscreen mode Exit fullscreen mode


img[title=flower] {
    border:2px dotted green;
}


Enter fullscreen mode Exit fullscreen mode


      <img src="flower.jpg" title="flower" />


Enter fullscreen mode Exit fullscreen mode

5. sibling selector

In CSS, the tilde (~) symbol is used as a sibling combinator in attribute selectors to select elements based on their attribute values when they are preceded by a certain sibling element. This is called the "attribute value includes" selector.

The syntax for using the attribute value includes selector is:



[attribute~=value]


Enter fullscreen mode Exit fullscreen mode


h2 ~ *[class~="primary"] {
  font-weight: bold;
}


Enter fullscreen mode Exit fullscreen mode


<h2>This is a heading</h2>
<p class="primary">hey</p>


Enter fullscreen mode Exit fullscreen mode

For example, the above CSS rule will select all elements with a class attribute containing the word "primary" when they come after a h2 element.

Github
Twitter

Happy Learning!!

Top comments (3)

Collapse
 
fruntend profile image
fruntend

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍

Collapse
 
hellonehha profile image
Neha Sharma

Woah!! thanks

Collapse
 
tacmorales profile image
Tac Yon Morales

Thanks! 😊, i needed a real example case to use attribute selectors.