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

AFAIK, you'll need a scripting language for the 'if . . . ' stuff.

You can use an id or a class.

what "if" stuff?

This:

if <a> has <img>
  border-style:none
else
  border:1px solid red 

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

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?

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

am I wrong?

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

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.

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

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.

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

degas, that wouldn't work - you're addressing the image, but it's the anchor element that has the border...

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
}

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>

@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.

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

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

to get rid of the HTML image border.

True. Or you could just use

img {border: 0; }

which is my favourite way.