Conditional styling

[TomJ]

Hi
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?

[Mr_Pancakes]

you could do this instead:
[code]
ul { list-style: none; }
a[href$=".pdf"]:before { content: url(Images/myico_PDF.gif); }
[/code]
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.