Jump to content

Conditional styling


TomJ

Recommended Posts

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?
Link to comment
Share on other sites

  • 7 months later...
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.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.