Jump to content

Parent Selector


Jerec
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Edited by dsonesuk
Link to comment
Share on other sites

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; }

Link to comment
Share on other sites

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>

Edited by jkloth
Link to comment
Share on other sites

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";}}

Edited by dsonesuk
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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}}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...