19 replies [Last post]
sascoms
Offline
newbie
Last seen: 14 years 39 weeks ago
Joined: 2005-03-11
Posts: 4
Points: 0

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 Smile :

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

larmyia
Offline
Elder
London
Last seen: 11 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies

larmyia
Offline
Elder
London
Last seen: 11 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

border style=none if -parent has -*** child?

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

what "if" stuff?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

border style=none if -parent has -*** child?

This:

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

Verschwindende wrote:
  • CSS doesn't make pies

sascoms
Offline
newbie
Last seen: 14 years 39 weeks ago
Joined: 2005-03-11
Posts: 4
Points: 0

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

larmyia
Offline
Elder
London
Last seen: 11 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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?

sascoms
Offline
newbie
Last seen: 14 years 39 weeks ago
Joined: 2005-03-11
Posts: 4
Points: 0

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

larmyia wrote:

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?

larmyia
Offline
Elder
London
Last seen: 11 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

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

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies

sascoms
Offline
newbie
Last seen: 14 years 39 weeks ago
Joined: 2005-03-11
Posts: 4
Points: 0

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

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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.

degas261
degas261's picture
Offline
Regular
New York
Last seen: 15 years 2 weeks ago
New York
Timezone: GMT-5
Joined: 2004-11-18
Posts: 23
Points: 0

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

The suburbs have the charms to soothe the restless dreams of youth...

-Neil Peart, Rush

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 40 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

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

degas261
degas261's picture
Offline
Regular
New York
Last seen: 15 years 2 weeks ago
New York
Timezone: GMT-5
Joined: 2004-11-18
Posts: 23
Points: 0

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
}

The suburbs have the charms to soothe the restless dreams of youth...

-Neil Peart, Rush

dappy
dappy's picture
Offline
Regular
United States
Last seen: 12 years 35 weeks ago
United States
Timezone: GMT-4
Joined: 2005-02-18
Posts: 50
Points: 0

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>

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies

dappy
dappy's picture
Offline
Regular
United States
Last seen: 12 years 35 weeks ago
United States
Timezone: GMT-4
Joined: 2005-02-18
Posts: 50
Points: 0

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 16 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 16 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

border style=none if -parent has -*** child?

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

Verschwindende wrote:
  • CSS doesn't make pies