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 an 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 bookstore 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 the 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 do this by CSS?

To achieve this requirement, we will use attribute selectors. So, let's 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 links 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 an external icon.

PS: do not worry about the 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 links 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 the exact attribute names. 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 the 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 an h2 element.

Github Twitter

Happy Learning!!