Prettify Hyperlinks using CSS3 Attribute Selectors

Today i’m came across blog bloggermint the CSS3 attribute which provide more flexible. Im going to show you few examples.

CSS3 Beginning Substring Attribute Value Selectors

e[att^='value'] { declarations here.... }

This selector matches the elements which have an attribute containing a value that startswith the specific value.

CSS3 Any Substring Attribute Value Selectors

e[att*='value'] { declarations here.... }

This selector matches the elements which have an attribute containing at least one occurrence of string “value” as substring.

CSS3 Ending Substring Attribute Value Selectors

e[att$='value'] { declarations here.... }

This selector matches the elements which have an attribute containing a value that ends with the specific value.

Note :

  • stands for elements such as p, a, img, div and more.
  • att stands for attributes like class, id, title, rel, cite, href, alt and more.
  • value stands for attribute values
Example for Value Selector
This is a sample<a href=”http://www.saisat.wordpress.com”>Satheesh Kumar Rajendiran</a>
This is a sample <a href=”mailto:satrece@gmail.com”>SaiSatheesh</a>
Values for the attribute are http://, mailto: We can use this for designing in css3
a[href^='http'] {
background: url(images/link.png) no-repeat left;
padding-left:20px;
}
a[href^='mailto'] {
background: url(images/email.png) no-repeat left;
padding-left:20px;
}
Output
Example for Ending Substring Attribute Value Selector
Since the ending value for the attribute href are .pdf and .png. we can use Ending Substring Attribute Value Selector to link.
a[href$='.pdf'] {
background: url(images/pdf.png) no-repeat left;
padding-left:30px;
}
a[href$='.png'] {
background: url(images/png.png) no-repeat left;
padding-left:30px;
}

Output

Any Substring Attribute Value Selector

This is a sample <a href=”http://www.bloggermint.com/word.doc?somewordhere”>Word Document</a>.
This is a sample <a href=”http://www.bloggermint.com/script.js?somewordhere”>Javascript</a&gt;.

a[href*='.doc'] {
background: url(images/file_doc.png) no-repeat left;
padding-left:25px;
}
a[href*='.rar'] {
background: url(images/file_rar.png) no-repeat left;
padding-left:25px;
}

Output

Advertisements