Attribute selectors target an elements based on its attribute. You can only define the element attribute, so that all the elements having that attribute will be targeted within the HTML.

There are 6 different types of attribute selectors:

[att=value] - The attribute has to have the exact value specified.

[att~=value] - The attributes value needs to be a whitespace separated list of words (for example, class=title featured home), and one of the words is exactly the specified value.

[att|=value] - The attributes value is exact value or starts with the word value and is immediately followed by -, so it would be value-.

[att^=value] - The attributes value starts with the specified value.

[att$=value] - The attributes value ends with the specified value.

[att*=value] - The attributes value contains the specified value.

For example, if you want to change the background color of all the div elements which are posted on your blog, you can use an attribute selector that targets every div whose class attribute starts with post-:

div[class*="post"] {
  background-color: #333;
  }

If you want to add a different icon next to each different type of file in your website is linking, so your visitor can know which type of file is this. This can be done by using an attribute selector:

css:-

a[href$=".jpg"] {
        background: url(jpg-icon.png) no-repeat left 50%;
        padding: 16px 0 16px 37px;
        }

a[href$=".pdf"] {
    background: url(pdf_icon.png) no-repeat left 50%;
    padding: 16px 0 16px 37px;
}

a[href$=".doc"] {
    background: url(file_extension_doc.png) no-repeat left 50%;
    padding: 16px 0 16px 37px;
}

html:-

<a href="image.jpg">Image</a>
<a href="file.pdf">PDF</a>
<a href="file.doc">Document</a>

In this example, we have used an attribute selector that will target all the links (a) whose href attribute ends ($) with .jpg, .pdf or .doc.