is there any css solution:
<a href="#">link1</a> <a href="#"><img src="image.img"></a>
i have these two different links. one link has text and the other has image.
now, i want my css to put border to the first link (which has only text), but put no border to links which has img inside.
i looked over w3c and selectors references but i couldnt find any solution..
in short :
if <a> has <img> border-style:none else border:1px solid red
border style=none if -parent has -*** child?
I could be wrong, but couldn't you apply an #id to the text link and then put a border around that #id in your css?
larmyia
border style=none if -parent has -*** child?
AFAIK, you'll need a scripting language for the 'if . . . ' stuff.
You can use an id or a class.
border style=none if -parent has -*** child?
AFAIK, you'll need a scripting language for the 'if . . . ' stuff.
what "if" stuff?
border style=none if -parent has -*** child?
This:
if <a> has <img> border-style:none else border:1px solid red
border style=none if -parent has -*** child?
first of all, thanx..
the if code was just for better explanation.. the explanation of what i want to do via css.
a.hover { border-bottom:3px solid red; } <a href=#"">link one</a> <a href=#""><img src="s.gif"></a>
now, both links have a bottom border of 3px.
as you see there is an image as a link text in the second link code.
the thing i want to do is: i do not want the second link to have a border since it has an image.. only text links should have a border. img links should have no border. how can i do this via css?
i hope i made it clearer..
thanx again,
sascoms
border style=none if -parent has -*** child?
thp: oic. would that be something like JavaScript then? (excuse the ignorance).
sascoms: from what I see you are applying your border to all your <a> elements. you need to use either an #id or .class in the html to the <a> with the image so that you can specify in your css that your images won't have any border.
am I wrong?
border style=none if -parent has -*** child?
yes you are right, i apply the border to all <a> elements.
we have P>IMG for example which means IMG which is inside P. I was looking for a rule which says P which has an IMG (child?) element
as you said, it can be done via #id or .class. yet i was wondering if it was possible with one rule of style.
anyway, thanks a lot ; )
sascoms
sascoms: from what I see you are applying your border to all your <a> elements. you need to use either an #id or .class in the html to the <a> with the image so that you can specify in your css that your images won't have any border.
am I wrong?
border style=none if -parent has -*** child?
I may not be answering your question, but if you say applied a class of .no_border then you'd only need one rule in your css, and apply that class to your html where you don't want a border.
sorry, if I'm not getting what you want...
border style=none if -parent has -*** child?
If you are using P>IMG for images inside a paragraph tag, surely you could use a>img for images inside a link?
IE will probably go to town with it, but it might work.
border style=none if -parent has -*** child?
right but, the border is assigned to the <a> tag, not the img tag. thus, if i put a>img {border-style:none;}, this will not affect the <a>'s border but the img border.
if the border was on the img tag, you were right.
--
also, this could be achieved by applying different classes to links which has img and which has text, but i was looking if it was possible without changing any html but just the style..
border style=none if -parent has -*** child?
It looks like you're looking for a parent selector and there isn't one. There won't be one in CSS3 either. The rules for selectors want to be applied at the start tag so searching deeper for children, etc is not allowed. It is okay to check for siblings and ancestors...
I think the easiest way to do this would be apply a class. Another way would be to use an attribute selector if, for instance, a title or alt attribute (or part thereof) were specific to the img anchors.
border style=none if -parent has -*** child?
Could a second id for the img work:
img#noborder
{
border-style: solid;
border-width: 0px
}
I'm just a newbie; let me know how far off I am...
border style=none if -parent has -*** child?
degas, that wouldn't work - you're addressing the image, but it's the anchor element that has the border...
border style=none if -parent has -*** child?
So, is that where the child selectors come in, like thepineapplehead was explaining about? Is this one of those cases where there's a solution but it doesn't always work (IE)?
How about:
#noborder a
{
border-style-bottom: solid;
border-width: 3px;
border-color: red;
}
#noborder a img
{
border-style: solid;
border-width: 0px
}
border style=none if -parent has -*** child?
This worked for me. Just needed to have higher specification of what elements you want to do what. So the div holds the links. <a> gets the border, a.noborder is for links<a> that you dont want to have a border, .noborder img removes the text decoration from a linked image. I may even have too much CSS in there
CSS: #test { margin:0; padding:0; font: 11px normal Arial, Helvetica, sans-serif; } #test a { display: block; text-decoration: none; width: 100px; height: 20px; border: 1px solid red; } #test a.noBORDER {border:none;} .noBORDER img { border: none;} HTML: <div id="test"> <a href="#">link One</a> <a href="#" class="noBORDER"><img src="background.jpg" width="100" height="20" alt="none"/></a> </div>
border style=none if -parent has -*** child?
@dappy - waaaay too much code. The following works:
CSS:
.border {
border: 1px solid red;
}
then HTML:
<a class="border" href="#">link one</a>
<a href="#"><img src="s.gif"></a>
This will only display a border on the first link. Simple.
border style=none if -parent has -*** child?
I see. But you still have to add:
a img {border:none}
to get rid of the HTML image border. So is there no easy way to do that with an ID? instead of specifying a class for every link? For instance you use this on a nav menu with 3 text links and 2 image links? Also the nav menu would probably be in a <ul>?
I figure I write WAAAY too much CSS for everythign cause I don't knwo what I'm doing yet. Just trying to get a better understanding. Thanks
border style=none if -parent has -*** child?
This is where knowledge of the site can help. If most links do not have an image, make the border the default and no border an explicit class;
a {border: 1px solid black;} a.noborder {border: 0 none;}If having an image is the usual case, make no border the default and make the bordered elements an explicit class.
a.bordered {border: 1px solid black;}
You must have some means of differentiation. Make the more rare case the explicit one.
cheers,
gary
border style=none if -parent has -*** child?
I see. But you still have to add:
a img {border:none}
to get rid of the HTML image border.
True. Or you could just use
img {border: 0; }
which is my favourite way.