I came across this issue when testing a stylesheet across different browsers, including IE6 (yes, I know..)
<head>
<style>
a:link, a:visited, a:hover, a:active { font-weight: bold; color: #000; text-decoration: underline }
.myclass a { color: red; text-decoration: none; }
</style>
</head>
<body>
<p>This is a test</p>
<div class="myclass">
<p>This is a test</p>
</div>
</body>
Results:
In IE6, the .myclass a rule only applies to the unvisited link state
In other browsers (FF, Chrome), the .myclass a rule applies to all link states
I believe that IE6 is wrong and that .myclass a, with no pseudo-classes specified, should apply to all link states. However I came across this SO question where it says that a is equivalent to a:link. This would match the behaviour in IE6. However I cannot find any official reference confirming this.
Which one is right?
Update:
As noted in the comments, the accepted answer to the question referenced above has since been updated.
The other browsers are right; IE6 is wrong.
The selector a should match any <a> elements, while a:link only matches <a> elements that are unvisited hyperlinks (the HTML 4 document type defines hyperlinks as <a> elements with a href attribute). Nowhere does it state in either specification that a should automatically translate to a:link or vice versa.
Since there's no such translation going on, your two CSS rules have equally specific selectors (your class selector shares equal specificity with each of your pseudo-classes). So, your second rule is supposed to override the first rule for any <a> elements within div.myclass, regardless of their link state, thereby making it always red and with no text decoration.
By the way, IE7 also fails to apply the font-weight: bold style when you test with an <a> element in div.myclass that isn't a link, even though it's supposed to as there is no overriding font-weight style in your second rule:
<div class="myclass">
<p>This is a test</p>
<p>This is a <a>test</a></p> <!-- does not bold on hover in IE7! -->
</div>
IE6 is right. Not specifying a pseudo-class on a is the same as :link. Therefore you must specify styles for :link and :visited if you want something specific - :hover and :active are optional.
Related
i want to change color of all my link on the page but it won't work on chrome, works fine on opera. i don't get what's going on can you help me make it work on every browser ??
a:link
{
color: rgb(255, 169, 73);
text-decoration: none;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Lake Towada</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<p>
some textOirase
some textthe mountainssome more text
</p>
</body>
Styling anchor links can be a bit tricky. There are several pseudo classes along with the basic a tag selector that can be used for styling that affect links based on their state.
/* newly added in the CSS selectors Level 4 specification */
:any-link, p :any-link{
color:black;
}
/* it is recommended to always have the pseudo classes it in this order */
:link{
color:blue;
}
:visited{
color:mediumvioletred;
}
:hover{
color:mediumaquamarine;
}
:active{
color:green;
}
/* lowest specificity, so it will not be applied */
a{
color:green;
}
<div>This link starts out blue.</div>
<div>This link *might* be violetred in your browser.</div>
<div>So might this.</div>
<div class="special">Hovering will turn the links aquamarine.</div>
<p>This link is black in browsers that support the new pseudo class. It also won't have any hover effects.</p>
If you ever visited one of the links in your code snippet on your Chrome browser (but not Opera) it will have a different color.
Most likely one or two of the links in the code snippet I provided will already have a different color for you because you visited one of those sites in the past.
To achieve a consistent result, explicitely set both :link and :visited and be mindful of selector specificity.
You can use :any-link to achieve consistent results, which is effectively the same as :link,:visited but keep in mind that not all browser support this newer pseudo-class yet and it has the same base specificity, so it needs to be declared last (This is the reason why the rule in the code snippet is only applied to the last link).
I encountered a peculiar CSS formatting problem when I changed a <div id="header"> block to HTML5's <header> block. Basically, I want links within the <header> block to be of a certain colour and to not get any decoration.
The relevant HTML and CSS codes look as follows:
<!-- HTML5 code -->
<header>
<h1>
Link text
</h1>
</header>
/* CSS code */
header a {
color: black;
text-decoration: none;
}
The output I see (using Firefox 20.0 with Ubuntu 12.04) is as if the CSS code fragment above does not exist.
Adding something like class="hdr" to the anchor block and changing the CSS rule to a.hdr works. Changing back to <div id="header"> and #header a also works. Still, I don't see why just using <header> and a corresponding rule fails, and it strikes me as the "correct" approach.
An initial search for a solution led me, among other links, to this link (I had the <h1> block nested within the <a> block, initially), but using a <div> wrapper didn't work either.
Try being more specific.
<header class="main-header">
<h1>Link Text</h1>
</header> <!-- .main-header -->
.main-header a {
color: green;
text-decoration: none;
}
using
header h1 a {}
as your selector should fix your specificity issue
Else if your style is getting overridden once it's become visited (by the a:visited selector) you can write a style of equal specificity but it'll override the other rule because it's later in the cascade
header a:visited {}
Just make it come later in the stylesheet
BTW, sorry had to post an answer as I can't comment yet
Is there any reason why CSS declaration won't display in the browser?
Here's a sample of my CSS file:
.adv {
color:#47463D;
}
.earnings {
color:#B4FF00;
}
When I do <font class=adv>hello</font>, it works a treat.
When I do <font class=earnings>hello</font>, the color specified for .earnings doesn't display in the browser.
The page is linked to the correct CSS file.
Chances are somewhere on your page you have a style whose specificity supersedes the .earnings (See this page). CSS is applied by a weight scale, so anything with a higher weight (calculated specificity) takes priority over what you think may be applied.
Best thing to do is use something like Firebug (firefox extension) or Chrome's inspector to see what style really is applied.
Example (And, by the way, CSS order is irrelevant)
<style>
/* what you think is applied */
.foo { color: red; }
/* What is being applied due to specificity */
#bar .foo { color: green; }
</style>
<span class="foo">.foo</span> <!-- color is red -->
<div id="bar">
<span class="foo">#bar .foo</span> <!-- color is actually green -->
</div>
Make sure to surround your parameter values with quotes. You also need to make sure your tags match up
<a class="adv">hello</a>
<font class="earnings">hello</font>
Finally, if you have multiple css parameters in .earnings you need to put a semi-colon after each one.
The last semicolon in a CSS declaration is optional, so that's not your problem.
Most likely you have other styling applied that has a higher precedence. The CSS precedence rules can be a bit weird; the most common stumbling point is that a highly specific declaration takes precedence over subsequent declarations that are less specific
Example from HTMLdog.com:
div p { color: red; }
p { color: blue; }
Using that stylesheet, any p elements within a div will be colored red, not blue.
What I really suggest you do is get a decent developer tools plugin for your browser (e.g. Firebug on Firefox) and look through the style tracing; it will tell you what is being overridden, and by what.
Add a semi-colon after your color line.
.adv {
color:#47463D;
}
.earnings {
color:#B4FF00;
}
Also, you should be using double quotes around your classes in html, along with matching closing tags:
<font class="earnings">hello</font>
Your second font tag is getting parsed as inside your first one, and not showing up.
I'm not sure if you intend to close a font tag with an a tag, but the following code works just fine:
<html>
<head>
<title>CSS Color Example</title>
<style type="text/css">
.adv {color:red;}
.earnings {color:red;}
</style>
</head>
<body>
<div class=adv>hello</div>
<div class=earnings>hello</div>
</body>
</html>
With firebug, use the element inspector (because I do not remember that the semicolons and the quotes was obligatory in the class attribute) and try to see what other selectors are involving whith the class "earnings".
Can you put a jsfiddle example of your problem?
Quite confused here.
<html>
<head>
<style>
.one
{
font-weight: normal;
}
.two
{
font-weight: bold;
}
</style>
<body>
<p class="two one"> Test!!!!!</p>
</body>
</html>
Why is Test bold? I'm clearly defining "normal" for the font weight "after" the bolded one?
I thought CSS did the cascading based on what order the classes were added right? Not the location in the file?
CSS doesn't care what order you specify the classes inside your class attribute.
Here, both classes have equal specificity, so the class lower down in your CSS "wins".
Specifics on CSS Specificity - a well written article explaining specificity.
Pointless demo of your code: http://jsfiddle.net/JwhmE/
It doesn't go off the order of the classes on the div but the order they are defined in the style rule.
I know that IE7 doesn't support the value inherit for any CSS properties except direction and visibility. When a browser doesn't support a value, it should simply not apply the given declaration (that particular line). Does anyone know why IE7 doesn't use the first ul a color declaration, instead choosing to use the plain a color declaration? Is it just ignoring the entire ul a rule?
To be clear: in most browsers the first link is red and the second link is blue. In IE7 the first link is red, but so is the second, even though I have at least one declaration it should understand in the ul a rule.
<!DOCTYPE html>
<html>
<head>
<title>Anchor Inherit Test</title>
<style type="text/css">
body {
color: #369;
}
a {
color: #f00;
}
ul a {
color: #369;
color: inherit; /* this should be ignored by IE7, right? */
}
</style>
</head>
<body>
<p>This is testing a red link in a paragraph.</p>
<ul>
<li>here is a link that should not be red</li>
</ul>
</body>
</html>
color isn't the only property which doesn't ignore unsupported and invalid values.
For example background-color and display are affected too.
Does anyone know why IE7 doesn't use
the first ul a color declaration,
instead choosing to use the plain a
color declaration? Is it just ignoring
the entire ul a rule?
Any unrecognized value (even none) will trigger the bug.
Apparently LTE IE7 discards all the color declarations in the same rule (even !important ones) if the last one contains an erroneous value.
And this jsbin confirms that it effectively overrides previous declarations in the same rule too.
As an alternative you could use a dynamic property.