CSS Attribute selectors

Attribute selector: It used to select all attribute by attribute selector and perform an operation by using this attribute to all of this.

Different types of attribute selectors

  • CSS [attribute|="value"] Selector

  • CSS [attribute^="value"] Selector


    <style type="text/css">

    a[href^="http://"] {

        background: url("/examples/images/external.png") 100% 50% no-repeat;

        padding-right: 15px;


Means select all link start with “http:// “ and show links with image.

CSS [attribute$="value"] Selector

Use attribute with $sign which is end with given value


    <!DOCTYPE html>

    <html lang="en">


    <title>Example of attribute selector</title>

    <style type="text/css">

               a[href$=".pdf"] {

                              background: url("/examples/images/pdf.png") 0 50% no-repeat;

                              padding-left: 20px;





        <p><a href="/examples/downloads/masters.pdf">Download PDF</a></p>



It selects all .pdf  hyperlink and displays pdf sign with download  


CSS [attribute*="value"] Selector


   <style type="text/css">

        [class*="warning"] {

            color: #fff;

            background: red;



All class with “warning” word shown in red background.

<p class="warning">The style will apply to this paragraph.</p>

<p class="alert warning">The style will also apply to this paragraph.</p>

Both paragraph show in red background.