CSS 3: Substring Matching Attribute Selectors

March 16, 2007 by  
Filed under Code Snippets, CSS, Tips and Tutorials

css-iconI was reading up on CSS 3′s Substring matching attribute selectors and discovered a fun way to reference anchor links!

Web links can be a variety of files. PDF, DOC, and HTML are some of the familiar ones. I was wondering if we could put a small icon to denote what type of file is being downloaded, and with CSS3, it’s quite possible.

Create an HTML file. Between the <head> tags, put

<style>
body { 
  font-size: .9em; font-weight: bold; 
}
a { color: blue; line-height: 1.5em; }
a[href$=".html"] { 
   padding-left:20px; background-image:url(html.gif); 
   background-repeat: no-repeat; 
}
a[href$=".pdf"] { 
   padding-left:20px; background-image:url(pdf.gif); 
   background-repeat: no-repeat; 
}
a[href$=".doc"] { 
   padding-left:20px; background-image:url(msword.gif); 
   background-repeat: no-repeat; 
}
</style>

and between the <body> tags, put:

<ul>
<li><a href="myfile.html">My HTML File</a></li>
<li><a href="myfile.pdf">My PDF File</a></li>
<li><a href="myfile.doc">My Word Doc File</a></li>
<li><a href="http://php-princess.net">Any Link</a></li>
</ul>

Save the file as mytest.html (and download these three images as well — MS Word PDF HTML) and open it up in Firefox 2.0. You will then see something that looks like this:

CSS 3 Links
Isn’t that great? The padding attribute moves the link 20px to the right. And the background-repeat attribute makes sure that image doesn’t repeat. So when I link a PDF file on my website, an image of a PDF file automatically shows next to the link. What a time-saver. :) The only drawback to this is that CSS3 isn’t fully implemented in all of today’s browser. It seems that Firefox 2.0 is ahead in the game. MSIE 7.0 and browsers below do not render CSS3 correctly. But it is a nice tip. Hopefully the next generation of browsers will render CSS3 the way it’s suppose to.

Related Products:

Web Design with HTML, CSS, JavaScript and jQuery SetWeb Design with HTML, CSS, JavaScript and jQuery SetA two-book set for web designers and front-end developers

This two-book set combines the titles HTML & CSS: Designing and Building Web Sites and Jav... Read More >

HTML and CSS: Design and Build WebsitesHTML and CSS: Design and Build WebsitesA full-color introduction to the basics of HTML and CSS from thepublishers of Wrox! 

Every day, more and more people want to learn some HTML and C... Read More >

Related Posts Plugin for WordPress, Blogger...
  • http://dianna.fourdee.com dianna

    that’s spiffy!! thanks!

  • http://dianna.fourdee.com dianna

    that’s spiffy!! thanks!