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:

CSS Pocket Reference: Visual Presentation for the WebCSS Pocket Reference: Visual Presentation for the Web

When you're working with CSS and need a quick answer, CSS Pocket Reference delivers. This handy, concise book provides all of the essential informa... Read More >

CSS Secrets: Better Solutions to Everyday Web Design ProblemsCSS Secrets: Better Solutions to Everyday Web Design Problems

In this practical guide, CSS expert Lea Verou provides 47 undocumented techniques and tips to help intermediate-to advanced CSS developers devise e... Read More >

Code Master Programming Logic GameCode Master Programming Logic GameMake programming fun by learning the basics without a computer! in code master, your avatar travels to an exotic world in search of power crystals. Al... 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!