CSS Attribute Selectors Demystified
Tags: css, css3, webdev, beginners
Published: 2023-02-17 17:44:34

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](https://dev.to/hellonehha/empower-your-css-skills-by-using-these-3-selectors-477f)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esagk88u43mdu9hkxmnn.png)



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:

```css
[attribute^=value]
```

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

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

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

and we will have all the links with external icon. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ll5j6ccqd4p81ei9i5ha.png)



**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.

```css
[attribute$=value]
```

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

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

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

and we will have different icons based on the extension. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7ll22qb60mo3day5img.png)

## 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:

```css
[attribute*=value]
```
For our requirement, we can use this selector to style all  link having social media name it.

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

```HTML
      <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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e53zyrzczn3dk4uxx0bo.png)


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:

```css
[attribute=value]
```

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

```HTML
      <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:

```css
[attribute~=value]
```

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

```html
<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](https://github.com/Neha/attributers-selector-demo)
[Twitter](https://twitter.com/hellonehha)

Happy Learning!!