Applying Style to Parent By Selecting Child - html

It appears some browsers (Chrome at least) put a partial underline under images that are nested inside of an anchor tag, like this:
<img src="/foo.jpg" />
So I'm looking for a way to add text-decoration: none; to any anchor tags that contain an img tag. My first thought was this:
a img {
text-decoration: none;
}
Of course that doesn't work, because the style gets applied to the img tag, and not the anchor. So is there a selector I can use to apply the text-decoration style to any anchor tag with a img child?
EDIT:
My HTML typically looks like this:
<a href="#">
<img src="/foo.jpg" />
</a>
The way I space and tab the elements is adding extra whitespace between the anchor tag, and image tag. It's that white space that's being underlined.

If you're against adding a class to this <a> tag (which is the simple solution), your next best CSS solution would be to remove text-decoration on the <a> tag, and wrap the text you want to have underlined in an inline element. See below:
For images:
<a href="#">
<img src="/foo.jpg" alt="etc" />
</a>
For text:
<a href="#">
<span>Text that you probably want underlined</span>
</a>
Combined:
<a href="#">
<img src="/foo.jpg" alt="etc" /> <span>Text that you probably want underlined</span>
</a>
CSS:
a { text-decoration: none; }
a:hover span { text-decoration: underline; }

Unfortunately there is no way currently of selecting the parent of an element using just CSS.
You would need to resort to javascript or jQuery.
Personally I would do something in jQuery like
$('a>img').parent().addClass('noTextDecoration');
then in css have the following:
a.noTextDecoration {test-decoration:none;}

I just use
img {
border:none;
}

So far as I can tell, there is no way to select an element's parent in CSS. You could try applying some class, i.e. imagelink to A elements that contain IMG elements, though.

If the href attribute of these anchors always points to images, and no anchors point to images besides the one with actually an img tag inside, then you can use:
a[href$=".gif"],
a[href$=".png"],
... ,
a[href$=".jpg"] {
text-decoration: none;
}

Related

How do I exclude a particular class from a CSS property?

I'm trying to not apply hoover on one of my CSS class with the :not() selector.
.left-menu-sidenav a:not(.selected):hover {
background-color: #6689E6;
color: white;
width: 100%;
}
<div className="left-menu-sidenav">
<a href="/">
<img alt={"left-menu"} className="left-menu-logo-image selected" src={left_menu_logo}></img>
</a>
</div>
I have a lot of tag in my page and I have to keep this logo in the "left-menu-sidenav".
What did I miss to exclude the hover from this particular class?
The a:not(.selected) is rereferring to an <a> tag selector but your HTML code has no class at all, only the <img/> within it has a selected class.
Consider why your image has this class, what toggles it.
Probably it should be moved to the parent <a> tag

Why is this specific text being underlined on hover?

I have some text where the inline styling is as follows:
<a style="margin-left:87px;color:white;">3mm</a>
For some reason, it's being underlined on hover. It looks like this:
The containing div is:
<div class="next-slide-container">
Poke ID<br>
Choose your Pokemon<br>
Details<br>
Size<br>
</div>
<div class="next-slide-container" style="margin-top:-7px">
<a style="margin-left:87px;color:white;">3mm</a>
<img class="texture-icon" role="button" src="Resources/Cutups/Texture_Icons/Pikachu.png">
</div>
I tried recreating it with a JSFiddle but I cannot get the text to underline is JSFiddle, even though the css for the container is not different than my own source code. Additionally, the text inside the first div class next-slide-container, like "Choose your Pokemon", does not highlight in my code. It's only just "3mm"; so it would seem that the inline styling is the problem? Thanks.
By default, most browsers set anchor tags <a> to have the css text-decoration: underline; If you want to remove any browser default underlining you need to add text-decoration: none; the the css for anchor tags.
Basically... add this to your CSS file or area.
a { text-decoration: none; }
Some browsers also add a default outline or pseudo "glow" to anchor tags (Mozilla).
If you want that to also go away, you would add this to your css for anchor tags:
a { text-decoration: none; outline: none; }
Valid HTML would mean you need to add either an href= value or a name= value to the anchor tag. Without one of these, the a tag is invalid.
In your fiddle, this invalid anchor tag may be the reason you aren't seeing the same thing as in your browser. Add href="#" to the anchor tag in your fiddle and you'll see the same issue. jsFiddle isn't as forgiving with improper markup the way browsers can be. That's kind of the purpose of jsFiddle. Browsers will guess at what is meant sometimes, jsFiddle really doesn't.
If you merely want to style the text, you can use <p>, <span>, <div>, <h1>, etc. tags. You don't need an anchor tag simply to style text.

Div link and hover does not work

I am building new website and I've run into a little problem.
When I added next to my div and after the div end, but the hover does not work on the div. When I delete <a href"about.php"> and </a> the hover works.
Here is HTML code:
<div id="centerbox">
<div class="profile"></div>
<a style="display:block" href="about.php"><div class="about"></div></a>
</div>
</div>
And here is CSS Code
#centerbox {
width:988px;
height:462px;
margin-top:8.7%;
margin-right:auto;
margin-left:auto;
}
.about {
width: 150px;
height: 150px;
display: block;
margin-left:15.8%;
margin-top:-150px;
background:url(/images/about1.png);
background-repeat:no-repeat;
}
This problem is that the div is a block element and the a tag is an inline element. A block element cannot go inside of an inline. You'll need to change your <div> to a <span> or something that is inline.
When an block element is inside the inline the browser will usually try to fix it by moving it out of the inline element.
If you need the effect of the block element on say the <span> mentioned above you could add display:block to the span.
See this post for further clarification
Make the .hover on your (a) tag rather then the class you are applying it to that should probably work :)
I solved it. I changed the <a style="display:block" href="about.php"><div class="about"></div></a> to <div class="about" onclick="window.location = 'about.php';">
You don't want to store a div inside of an ref tag. You can give that ref tag a class though which will give it styling for that class

Unwanted underlining appearing under text

I'm displaying some text and a blue line is appearing underneath it
http://jsfiddle.net/mungbeans/CmVsJ/
Same as this question
Text being displayed with a blue underlining, where is it coming from?
The answer to that and to others say it is invalid for html4 but valid for html5. Why does this problem occur with the fiddle in that case? Whats the solution?
Thanks
Here is your code
<ul>
<a href="http://whatever">
<li id = "header_list">
<div id = "main_title">title</div>
<img id = "logo" src="logo.png"/>
</li>
</a>
</ul>
The div id="main_title" is within the anchor tag, meaning it is a link. By default, link styles have the blue underline. You could add the css style to remove the blue underline:
#main_title {text-decoration: none; color: #000;}
Also, you should put the li tags directly after ul, since it needs to be a direct child:
<ul>
<li id = "header_list">
<a href="http://whatever">
<div id = "main_title">title</div>
<img id = "logo" src="logo.png"/>
</a>
</li>
</ul>
It's coming from your <a> - because everything is wrapped in it. To remove it simply apply:
a {
text-decoration: none
}
DEMO
You just need to change the style for your links (all the text is within your <a> tags):
a{text-decoration:none;}
It is inside an <a> tag which will be rendered with an underline by default. Change the default behavior by setting text-decoration: none for links and it should work.
`
Anchor tags a have an text-decoration definition of underline by default.
You can fix this by simply adding the text-decoration: none; attribute to your CSS definition.
I should also point out that your markup isn't entirely correct. Your anchor should be within the list-item li, and it's generally not a good idea to have block elements div inside of inline-block elements a.
Here is an updated version of your jsfiddle to demonstrate what I mean: http://jsfiddle.net/CmVsJ/2/

Remove underline from link within hyperlinked div

I am using the html below
<a href=""><div class="logo"><span class="whologo">hyperlinked text </span>
</div></a>
the problem i am having is that the only way to remove underline from the span text is using a:link{text-decoration:none;} but this removes underlines from ALL links from the whole page
I have tried
a.logo:link{text-decoration:none;}
but it doesnt remove the hyperlink from the span element.
You have a wrong hierarchy there and bad element selection. In your case, the most accurate CSS would be:
a div.logo span.whologo {text-decoration:none;}
But I suggest this approach:
<div class="logo"><span class="whologo">hyperlinked text </span>
And CSS:
div.logo a {text-decoration:none;}
Or include the span if needed (but only if the span element has underlines, like Hans pointed out in the comment):
div.logo a span.whologo {text-decoration:none;}
Child items cannot influence their parents using CSS. You need to put an ID or class name on your A tag, or find something unique up the tree that you can specify for this element.
Check this out
<style type="text/css">
.linkTst{text-decoration:none;}
</style>
<div class="logo"><a href="" class="linkTst"><span class="whologo">hyperlinked text </span>
</a> </div>
Put a class on your a tag where you don't want the underline
like this : http://jsfiddle.net/UL8SW/
First of all: This is not valid html... And you should give your a a class or id, otherwise this isnt possible with remote css. It is possible with inline css...
Give anchor tag a class.
HTML:
<a href="" class='no-underline'><div class="logo"><span class="whologo">hyperlinked text</span>
CSS:
.no-underline {text-decoration: none;}