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;}
Related
I am trying to modify the link color inside a <span>. (I know that this is not optimal/conforming, but I am stuck in a situation where I don't have access to the header and also cannot play with the <a> tags.) I tried something like this, which doesn't work
<span style="a {color:#C04040} ">
Try to change in a <span>: This link
</span>
I also tried other variations, like:
<span style="a.color:#C04040">
I admit that I don't understand the syntax of <style> as a tag, as opposed to inside the header. Would appreciate any help, or links to complete documentation.
Thanks!
If you want to apply this rule to all your span tags, you can just place this in the content of your html document. Then all tags inside a span tag will get red with blue background.
<style>
span a { color:red; background-color:blue; }
</style>
If you want to apply this only to a specific span tag, just use a named class like
<style>
span.colorlink a { color:red; background-color:blue; }
</style>
And then you can do <span class='colorlink> for the spans you want colored.
I would like to use text-decoration to underline a word in a heading but I can't figure out how to do it in CSS. Is it even possible?
I thought about using <span> but is there a way to use multiple spans and address them separately in CSS?
Since you want to do it using CSS, you can assign an id to the span element. Then use CSS to style it
<span id="under">Hello</span>
And the CSS
#under{
text-decoration : underline;
}
And if you want to underline multiple spans, you can use class attribute.
<span class="under"> </span>
.under{
text-decoration : underline;
}
For underlined text in HTML, use the <u> tag.
I have this code that styles the <a href="#">:
<div class="styled">
link
<div class="notStyled">
another link
</div>
</div>
The first link have one style and the second link have the same style, I want it to be default like a clean link.
Here, try this JSFiddle example,
.styled > a {
color:black;
}
The > used in this means it only selects direct children of .styled and not ALL children.
What you are probably doing is .styled a, which selects all children (even nested within others), and you don't want to do that...
Without seeing your code I can only guess what you have done.
From your question I get you want to style the first, but not the second a tag.
You could use this to style only the first a tag:
.styled > a {
/* your styling */
}
The > selects the direct children of .styled so this will not style your .notStyled a.
Try this :
.styled > a {
color:red; /*custom style for the first link*/
}
live exemple : http://jsfiddle.net/72bQM/1/
I don't know if this is what you did, but it looks like the second <div> is there just as a try to let the second link have no-style.
I suggest, instead, to give have this code
<div>
<a href="#" class="styled">
<a href="#">
</div>
And then in CSS just
.styled{
/* Give the style you want */
}
This way you just have to add the class="styled" to the link you want to be styled, without using many DIVs.
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/
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;
}