CODEWITHSUNDEEP
htmlcsspseudo-class
ITS Alaska
ITS Alaska

Reputation: 739

CSS Selector :almost-empty?

I'm aware that the :empty pseudo-class will select all elements with no children, but I want to only select elements with text-nodes as children.

I have a bottom-border on my hyperlinks that're a different color than the text, but this is a problem because the hyperlinked images are also getting this underline.

I've tried a *:not(*){ border-bottom-width: 0; } in an attempt to fix this, but it didn't work. Is there a way to select a tags with only text-nodes for children?

Upvotes: 8

Views: 166

Answers (6)

ITS Alaska
ITS Alaska

Reputation: 739

I ended up just using jQuery. I don't believe it's possible with just CSS right now.

jQuery('document').ready(function(){
    jQuery("a").each(function(){
        if(this.children.length !== 0)
            this.style.borderBottomWidth='0';
    });
});

Upvotes: 0

Oleg
Oleg

Reputation: 24988

This cannot be accomplished because of the way border property is applied and rendered outside the top-most box of your anchor - effectively the only way to achieve such an effect with a border would be to negate the property. Sometimes it coult be visually acceptable to use a bottom border in a background colour to overlay over that of of your anchor's - an unreliable practice to be frowned upon. Maybe the effect could be simulated with filters, but I wouldn't count on it being sufficiently well-supported cross-browser.

What I propose is going back to the text-decoration property *while still maintaining a different, independent underline colour` - a neat approach overall, but not without the overhead of an additional element:

<style>
.fancy-underline { color:blue; text-decoration:underline; } 
.fancy-underline a { color:black; text-decoration:none; }
</style>
<span class="fancy-underline"><a href="#">I am a fancy link
  <img src="//placekitten.com/30/30/" /> with an image in the middle of it
</a></span>

http://jsfiddle.net/ovfiddle/TwmmF/3/

Upvotes: 0

Ali Bassam
Ali Bassam

Reputation: 9959

When the ONLY CHILD of <a> is not an img ...

a:only-child:not(img)
{
    border-bottom-width: 1;
}

Upvotes: 0

bookcasey
bookcasey

Reputation: 40473

Instead of a crazy selector, why not hide the border with a negative margin:

a img {
  margin-bottom: -6px;
}

Demo

Upvotes: 1

Erik Nielsen
Erik Nielsen

Reputation: 36

NEW ANSWER:

If you want a border under the image, but not the text do this:

a img { border-bottom: 1px solid #000; }
a:emtpy { border: none; }

If you want the opposite (border under the text but not the image) do this:

a:empty { border-bottom: 1px solid #000; }
a img { border: none; }

OLD ANSWER:

If it's just a problem with images that are wrapped in a tags, try:

a img { border-bottom: none; }

Upvotes: 1

Matt Whitehead
Matt Whitehead

Reputation: 1801

If I understand your problem correctly, you are trying to keep your hyperlinked images from being underlined. If so, why not do something like: a img { text-decoration:none }?

Edit: If its the links on img tags you don't want underlined, apply a class to those links with text-decoration:none

Upvotes: 1

Related Questions