Parent Selector

[Jerec]

I'm working on a site where the links have icons beside them to indicate if they are file links (pdf, doc, jpg, etc) or external links.I'm now finding that image links (<a><img/></a>) are having these icons. From what I can figure, I'd need some sort of selector that can refer to a parent, but this isn't possible without JavaScript from the research I've done.Would anyone happen to know a solution to this that doesn't involve scripting?Thanks

[ShadowMage]

Can you show us what the CSS looks like? HTML would probably help too.

[boen_robot]

AFAIK, there's none indeed, because researches from browser vendors identify that implementing it in a dynamic environment as JavaScript would not be efficient. I mean, surely, matching it once is easy and efficient enough, but because the selector would have to be evaluated at every redraw (i.e. every time you add/remove a node), it quickly becomes far less efficient.If you only need to match them once, you can either use XPath with something like Sarissa or with jQuery's parent selector... in both instances, this means using JavaScript.

[dsonesuk]

this really depends on the html if it is similar to below<div id="iconlink"><a class="pdf" href="link1.php">link1</a><a class="doc" href="link2.php">link2</a><a class="jpg" href="link3.php">link3</a></div>the parent link would be iconlink, and then assign image to specific class#iconlink a{display:block;float:left; padding:0 16px 0 32px; height:20px;line-height:20px;color:000;} /*this will target these anchor links only*/a.pdf{background-image:url(..images/pdf.jpg) no-repeat left top;} /*background image*/a.doc{background-image:url(..images/doc.jpg) no-repeat left top;}/*background image*/a.jpg{background-image:url(..images/jpg.jpg) no-repeat left top;}/*background image*/extra padding is added to left of anchor link to allow for background image, if link has text, if not! adjust to your needs.

[Jerec]

It's more or less:#content a[href^=http://],#content a[href^=https://] { background: transparent url(images/icons/ext.png) center right no-repeat; padding-right: 16px;}What I'd need is something to cancel out this effect for links with images, something like:#content [hypothetical selector here] { background-image: none; padding-right: 0; }

[ShadowMage]

What you could do is create a class for links that will have images:#content a.imagelink {background-image: none;padding-right: 0px;}And put that on the links that will contain images.<a class='imagelink' href='...'><img src='image.jpg' alt='Link' /></a>

[dsonesuk]

is it possible to assign a class to these specific anchors?other option is to use javascript to target these anchors and make required adjustments.targetcontainer = document.getElementsById("content");targetanchors = targetcontainer.document.getElementsByTag("a");for(i=0;i<targetanchors.length;i++)//search through all anchors within div id=content{if(targetanchors.childNodes[0].nodeName=="IMG") //if anchor has image within it do following styling{targetanchors.style.backgroundImage="none";targetanchors.style.paddingRight="0";}}

[Jerec]

This is a very large site and it would be difficult to add classes to each case, which is why I'm after a selector.

[ShadowMage]

What about this: http://w3schools.com/css/pr_pseudo_before.aspYou could change the existing selectors to something like this (I think)

#content a[href^='http://'] *:before {   content:url(images/icons/ext.png);}#content a[href^='http://'] img:before {   content:none;}

I haven't tested that so I'm not 100% sure if I have the selectors correct, but I think it should work.

[dsonesuk]

from what understand, it will create image, text and audio content before <a> you can control only these new elements, and not the anchor itself, plus its not fully supported in ie browsers lower than IE8. From what i understand, anchors other than the ones with images will have a background image. I can't see any other way of assigning the required css styling unless you add a class manually, or dynamically (some cms, systems give option to add image left, right, and center that use class to control) or by javascript.this similar to above, but will add class to specific anchors, which have img as childcss:#content a.imagelink {background-image: none;padding-right: 0px;}java script:targetcontainer = document.getElementsById("content");targetanchors = targetcontainer.document.getElementsByTag("a");for(i=0;i<targetanchors.length;i++)//search through all anchors within div id=content{if(targetanchors.childNodes[0].nodeName=="IMG") //if anchor has image within it do following styling{targetanchors.setAttribute('class', 'imagelink');targetanchors.setAttribute('className', 'imagelink');//For IE}}

[Jerec]

I probably should have mentioned that I'm aware of JavaScript solutions so I wouldn't waste anyone's time to think up code.Anyways, it looks like this is just a fundamental limitation of CSS that we can't really get around. But much thanks for the responses.