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?

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]

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;
}

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

and we will have all the links with external icon.

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]

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;
}

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

and we will have different icons based on the extension.

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]

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;
}

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

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

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]

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

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

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]

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

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

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!!