Jump to content


Conditional styling

  • Please log in to reply
1 reply to this topic

#1 TomJ

  • New Members
  • Pip
  • Newbie
  • 2 posts
  • LocationHoogland, the Netherlands

Posted 25 April 2006 - 10:56 AM

I have a number of tables containing links to various types of documents (docs, pdfs, xls's, ...):
<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>
Now I want to apply consitional styling.
When I use
a[href $=".pdf"] {
    background-image: url(Images/myico_PDF.gif);
    background-repeat: no-repeat;
    padding-left: 10px;}
I get my little pdf icon as background. But I really want to have the little icon as list-style-image, something like
ul li[a[href $=".pdf"]] {
    list-style: outside url(/Images/myico_PDF.gif);}
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?
[!--sizeo:1--][span style="font-size:8pt;line-height:100%"][!--/sizeo--][!--coloro:#D20000--][span style="color:#D20000"][!--/coloro--]
-t- ยท Tom Jacobs

#2 Mr_Pancakes

  • Members
  • PipPip
  • Member
  • 17 posts
  • LocationSouthwest USA

Posted 27 November 2006 - 02:45 AM

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.

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users