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

Ex.

    <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

Ex.

    <!DOCTYPE html>

    <html lang="en">

    <head>

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

               }

     </style>

     </head>

     <body>

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

     </body>

    </html> 

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

                       

CSS [attribute*="value"] Selector

Ex.

   <style type="text/css">

        [class*="warning"] {

            color: #fff;

            background: red;

        }

   </style>

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.

Powered  by Codersarts