Why is the link using the underline?
<html>
<head>
<style type="text/css">
body{
text-decoration: underline;
}
#text{
text-decoration: none;
}
</style>
</head>
<body>
Text text text <br/>
<div id = "text">
link
</div>
</body>
</html>
Because this is the default (user agent css have this rule, to apply underline in every tag a). The default isn't inherit, so even if parent tag has underline, the child won't get it.
EDIT 1:
For example, firefox have this rule:
*|*:-moz-any-link {
text-decoration:underline;
}
Default would be:
*|*:-moz-any-link {
text-decoration:inherit;
}
Then, in your example, the tag a would inherit div text-decoration.
EDIT 2:
You can overwrite default behavior with:
a {
text-decoration: inherit;
}
It's the default behavior of the a tag. It doesn't match the #text style.
I think you want to replace this...
#text{
text-decoration: none;
}
with this...
#text a:link{
text-decoration:none;
}
this tells the rule to apply to all anchors that are children of the tag who's id is 'text'
It's included in the default browser CSS. It's just as if this was included prior to your style tag:
a{
text-decoration: underline;
}
Sure, the link also matches #text, but since a is more specific, it wins. Any attributes not explicitly specified by the browser's a (such as font-size) will be inherited.
Related
I am currently using:
a:link {
color: #FF0000;
text-decoration: underline;
}
But on a certain page in my website I want to be able to have my links in a separate colour.
What is the best way to do this through CSS?
I don't want to do:
<font color="#00FF00">...</font>
As i know this is deprecated code
Add a class to every link you want to affect:
HTML: Link
Then add this CSS or similar to your style sheet:
CSS: a.alternate {color:#00FF00;} //or whatever
Demo: http://codepen.io/hwg/pen/Aalkb
apply different class attribute to that link. for ex:
HTML
link1
link2
CSS
a:link {
text-decoration: underline;
}
.red{
color: #FF0000;
}
.black{
color: #000000;
}
see this Fiddle
I have block level links, which contain other block level elements with a different color.
The problem I have is that once you visited that link Google Chrome shows the a:visited color, and not the specific colors of his children.
I've made a jsfiddle as example: http://jsfiddle.net/yvesvanbroekhoven/UTwgU
You can see the difference in Firefox & Google Chrome. Click on the link and then it the colors of the title & text should be red/green, but in Chrome they become purple.
Any ideas?
This is invalid HTML. You can't havr a block level element within an inline one. Put links inside the other tags:
<h1>
Title
</h1>
<p>
Intro text
</p>
CSS
h1 a {
color: red;
}
p a {
color: green;
}
To style a visited link, use:
p a:visited{
color: green;
}
h1 a:visited {
color: red;
}
Demo here.
It is red/green in my chrome (v 14.0.835.202)!
Anyway you can set the colors as you want:
a:visited p{
color: green;
}
a:visited h1{
color: red;
}
seems to work as expected in Chrome 17.
If a link styles aren’t inheriting to child block-level elements, try using inherit, eg:
<header>
<style scoped>
a {background-color: #f9fda2;} /* highlight */
/* without inherit h1 won’t get the link’s background-color */
a h1 {background-color: inherit;}
</style>
<a href="/">
<h1>Title</h1>
<p>meta</p>
</a>
</header>
Consider the following html:
<div id="rightBar">
<div class="barElement">
<div class="barText">Not underlined<br /></div>
<div class="barLinks">Should be underlined</div>
</div>
</div>
And the following css:
#rightBar a
{
text-decoration: none;
}
#rightBar a.barLinks
{
text-decoration: underline;
}
The 'Should be underlined' link is not underlined, shouldn't it be since it inherits both the class barLinks and the id rightbar. Also the '#rightBar a.barLinks' (0, 1, 1, 1) has more specificity than '#rightBar a' (0, 1, 0, 1), so it should override the latter right?
How else can I get the 'Should be underlined' link to be underlined without resorting to using any inline specifications (both css or html)
Your a element does not have the class barLinks. Do this:
#rightBar .barLinks a
{
text-decoration: underline;
}
example: http://jsfiddle.net/J34mj/2/
It's not a specificity issue, you are using the wrong selector. It should be this:
#rightBar .barLinks a {}
#rightBar a.barLinks
{
text-decoration: underline;
}
Won't work because the class="barLinks" isn't on the <a>
Try this;
#rightBar .barLinks a
{
text-decoration: underline;
}
Or failing that;
#rightBar .barLinks a
{
text-decoration: underline !important;
}
It shouldn't be, the barLinks is only applicable to a tags, if you change your css to #rightBar .barLinks a it should work.
So the problem I see here is that you have mentioned an incorrect address to reach to your anchor tag element using the CSS selector. If you are going for a longer and more prominent address route then it should be as follows:
#rightbar .barElement .barLinks a{
text-decoration : underline;
}
But since you are looking for a more specific one, your approach was correct except for the fact the anchor tag does not have a class of its own, therefore a.barLink would find nothing. It should rather be as :
#rightBar .barLinks a{
text-decoration : underline;
}
below is my markup. when i move the mouse over the hyperlinks they get underlined and turn red. but if i swap the order of the last two rules, the hyperlinks still get underlined, but their color changes to black rather than red. is this by design? if so, how are the rules applied?
thanks!
konstantin
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
<style type="text/css" media="all">
.menu a
{
text-decoration: none;
}
.menu li:hover a
{
color: black;
}
.menu li a:hover
{
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>item0</li>
<li>item1</li>
</ul>
</div>
</body>
</html>
If the rules are equal in specificity (in this case they are), individual rules get overridden in the order they're defined in the CSS, so in your example red wins because it comes later in the CSS definitions. The same rule applies in other cases as well, for example:
<div class="red green">
Which of these wins?
.green { color: green; }
.red { color: red; }
.red wins here, it doesn't matter the order in the class attribute, all that matters is the order the styles are defined in the CSS itself.
Consider the following HTML.
<div class="red">
Some red text...
</div>
And this CSS..
.red {color: red}
.red {color: blue}
.red {color: yellow}
You guessed it, the text will be yellow!
Yes the order matters, and in this case it is not really the order which is why you are having the same result regardless of the order.
The .menu li:hover a is applied to the li, which is a parent of the a and the hover is not applied to the a it is applied to the li.
The .menu li a:hover is applied to the a.
Regardless of the order the .menu li a:hover style will be applied to the a.
The better way to handle that is to have the hover pseudo selector applied to only the a element and make set display: block on it, with height and width set to 100%. This will fill the entire LI
Hope this clarifies things.
Yes, it does. The last point of the cascading order reads:
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.
CSS rules are applied in order if they have the same specificity. In your case, they do, so order matters.
With the order you have in your question, the rules apply text-decoration: none. The second and third rules causes hovering the mouse over the link to modify those two styles in order because the a tag is inside the li tag. First, the color turns black; then, the color turns red and the underline appears.
Reverse the order of the last two rules like so:
.menu a
{
text-decoration: none;
}
.menu li a:hover
{
color: red;
text-decoration: underline;
}
.menu li:hover a
{
color: black;
}
Now, the text-decoration: none gets applied as before. Then, upon mouse-over, the first rule changes the color to red and adds an underline, followed by the color changing to black.
I have a link inside a DIV. How can I change the color of this link inside this div. This code does not seem to work
<style type="text/css">
.someDiv
{
font-size:14px;
color:#c62e16;
}
</style>
<div id="someDiv">
SOne Text
</div>
Thanks.
ids are accessed by a pound sign (#), and classes are accessed by a period (.)
<style type="text/css">
#someDiv a
{
font-size:14px;
color:#c62e16;
}
</style>
<div id="someDiv">
SOne Text
</div>
use
.someDiv a {
font-size:14px;
color:#c62e16;
}
You are using the wrong selector. You have an id="someLink", and the CSS is looking for the class="someLink". Try with #someLink, it'll work.
div#someDiv a{
color: #hexcode;
}
That will work too, you use the selector to select ALL the elements of the type "a" in a div with the id="someDiv".
While you're using the wrong selector for someDiv you will usually need to set a colours separately:
#someDiv, #someDiv a {
color: red;
}