Jump to content


This topic is now archived and is closed to further replies.


Conditional styling

Recommended Posts

I have a number of tables containing links to various types of documents (docs, pdfs, xls's, ...):
[code]<td width="25%"><ul>
   <li ><a href="test.pdf">Test1.pdf</a></li>
   <li ><a href="test.doc">Test2.doc</a></li>
   <li ><a href="test.xls">Test3.xls</a></li>
</ul></td>[/code] Now I want to apply consitional styling.
When I use [code]a[href $=".pdf"] {
    background-image: url(Images/myico_PDF.gif);
    background-repeat: no-repeat;
    padding-left: 10px;}[/code]I get my little pdf icon as background. But I really want to have the little icon as list-style-image, something like [code]ul li[a[href $=".pdf"]] {
    list-style: outside url(/Images/myico_PDF.gif);}[/code]
So, if there is a list item containing a <a> that contains a <href> ending in ".pdf", I want the list-style-image to be myico_pdf.gif.

But my browser doesn't understand me. Where do I go wrong?

Share this post

Link to post
Share on other sites
you could do this instead:
ul { list-style: none; }
a[href$=".pdf"]:before { content: url(Images/myico_PDF.gif); }
although by nature, using css isn't the best approach to solve this problem because this (or your previous) solution doesn't work in IE. i'd use a simple php function to assign a custom pdf, doc or xls css class to each li tag with a unique list style image.

Share this post

Link to post
Share on other sites


Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.