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 (with HTML5): Learn CSS in One Day and Learn It Well. CSS for Beginners with Hands-on Project. Includes HTML5. (Learn Coding Fast with Hands-On Project Book 2)CSS (with HTML5): Learn CSS in One Day and Learn It Well. CSS for Beginners with Hands-on Project. Includes HTML5. (Learn Coding Fast with Hands-On Project Book 2)Master HTML and CSS with Interactive Exercises and a Unique Hands-On Project. Learn them fast and learn them well.

Have you always wanted t... 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 Complete: A Practical Handbook of Software Construction, Second EditionCode Complete: A Practical Handbook of Software Construction, Second Edition

Widely considered one of the best practical guides to programming, Steve McConnell’s original CODE COMPLETE has been helping developers write bet... 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!