I just found this:
Note: a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order
to be effective!!
Note: Pseudo-class names are not case-sensitive.
Does this mean that this is INCORRECT?
a:link, a:visited, a:active {
color: #006699;
text-decoration: none;
}
a:hover {
color: #2089CC;
text-decoration: underline;
}
Sadly the source is: http://www.w3schools.com/css/css_pseudo_classes.asp
If you don't know why the 'sadly', please visit http://w3fools.com
Whenever in doubt go to the specs. And here's an excerpt from the specs.
Note that the A:hover must be placed after the A:link and A:visited
rules, since otherwise the cascading rules will hide the 'color'
property of the A:hover rule
What you have is correct
a:link, a:visited, a:active {
color: #006699;
text-decoration: none;
}
a:hover {
color: #2089CC;
text-decoration: underline;
}
That's why this works.
This below would be incorrect.
a:hover {
color: #2089CC;
text-decoration: underline;
}
a:link, a:visited, a:active {
color: #006699;
text-decoration: none;
}
That's why this doesn't work.
Your proposed way of including a style for each pseudoclass does not allow each pseudoclass to override the last. When you combine the styles like that, then they are simply applied together as a group.
For example, the :active pseudoclass comes last, so that it overrides :focus, or :hover pseudoclasses before it. This makes sense if you think of a link becoming active when clicked and you want a new style to be applied while the user is still hovering over the link with their cursor.
The true order is as follows:
a:link {
⋮ declarations
}
a:visited {
⋮ declarations
}
a:focus {
⋮ declarations
}
a:hover {
⋮ declarations
}
a:active {
⋮ declarations
}
Here is a little reassurance for you.
From the CSS 2.1 specification on dynamic pseudo selectors:
Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.
Interestingly, the current CSS3 draft specification does not seem to mention this (or at least not as clearly).
Related
I have an <a> tag
GOOGLE
with following styles:
a {
color: red
}
a:hover {
color: green
}
a:active {
color: blueviolet
}
a:visited {
color: brown;
}
Here is my problem :
a:hover And a:active Are ignored
I Know This Is for Cascade Rules But
I want to know best practice to solve it.
I tried adding !important and it worked as I wanted.
I changed line numbers (because importancy and specification are equal so line number is important) and it worked correctly But I want to know which solution is best !!
adding important is not a good idea in most cases
and line number is changing in development.
Can I have some kind of selector like this?:
a:not(:hover):visited {
color: blue
}
I assumed a:hover and a:active are ignored if the link has been visited. If that is the case, try this:
a {
color: red
}
a:hover,
a:visited:hover {
color: green
}
a:active,
a:visited:active {
color: blueviolet
}
a:visited {
color: brown;
}
GOOGLE
can I have some kind of selector like this ?
a:not(:hover):visited { color: blue }
Yes, you can.
I suggest that you read this Tutorial. According to that one:
In general, the order of the pseudo classes should be the following — :link, :visited, :hover, :active, :focus in order for these to work properly.
so If you change your CSS file to this one it must be worked correctly:
a:link {
color: red
}
a:visited {
color: green
}
a:hover {
color: blueviolet
}
a:focus {
color: rgb(230, 49, 175);
}
If you think that hover and active or ... does not work properly, maybe it is because you have visited the link before. try to change the "href" address to see that they are working.
When setting the style for several link states, there are some order rules:
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
a:link {
color: red
}
a:visited {
color: brown;
}
a:hover {
color: green
}
a:active {
color: blueviolet
}
GOOGLE
See this to know more about link and their states like hover visited order
First, you forgot the semicolon
Second, if !important works, just use it.
Third, I have never met this selector before.
See further about this on W3School
Below code attempts to prevent a href from changing color. I have added !important as attempt to achieve this :
NG
a:link, :visited, :active, :active { color: navy; !important}
a:hover, :focus { color: #FF6800;}
http://jsfiddle.net/Ht6Ym/3264/
But when hover over element its color changes, have I incorrectly used?
add !important before semicolon:
color: navy !important;
Your selectors are a little off, this worked for me. Also fix the syntax of important.
a:link, a:visited, a:active, a:active { color: navy!important; }
a:hover, a:focus { color: #FF6800;}
http://jsfiddle.net/oadg1vgc/1/
you don't actually need the !important declaration, as this is very much seen as hackish and you should look to be more specific instead. For example, the below doesn't use the important declaration, and yet doesn't cause an issue:
a,
a:hover {
color: black
}
link 1
<br/>
link 2
<br/>
link 3
<br/>
link 4
<br/>
As a reference, though, the !important tag should be placed before the semicolon ; in your declarations.
a:link,
:visited,
:active,
:active {
color: navy !important;
}
a:hover,
:focus {
color: #FF6800;
}
NG
However, I can only stress how much this should be avoided, as it can cause issues further down the line in terms of specificity.
You have used wrong syntax, Fix the syntax
a:link, :visited, :active, :active { color: navy !important;}
I have a simple setup with a:link, a:visited a:hover and a:active all defined at the top of my style sheet. I also have a div where I've defined an a:link color for anchors inside of it. When I do this those links do not inherit the remaining pseudo classes for hover and active.... until I click that div's link and it has thus been "visited", at which point the pseudo classes start working. Why is this?
the CSS...
a:link {
color: blue;
}
a:visited {
color: purple
}
a:hover {
color: red;
}
a:active {
color: pink;
}
#theDiv a:link {
color: green;
}
the HTML...
The First Link
<div id="theDiv">
The Second Link
</div>
http://jsfiddle.net/ZKztj/7/
#theDiv a:link has a higher specificity than all your other selectors and is overriding them until the link no longer matches the :link selector, at which point it matches the :visited selector.
All browsers set a default style for anchor elements.
You need a more specific selector to override:
#theDiv a:hover {color:red}
I would like all the standard styles of underline, bold and color to be removed from the anchor tag so that all an anchor tag does is link and not upset the display.
I tried the following but I still have everything inside in blue and bold which is a pain.
a,
a:link,
a:visited,
a:hover,
a:active {
color: inherit;
text-decoration: inherit;
font-weight: inherit;
}
Anybody know how to not just remove the style by substituting a replacement but to actually not have it style the link at all so that styles are not upset within the anchor.
That CSS should be working. Perhaps your stylesheet isn't being loaded? Try making the font size of links obviously large with font-size:50px;, for example.
If the links become large but the colour/text-decoration/font-weight still aren't inheriting then I don't know what the problem is but if the links remain the same size then your problem lies with linking your css to your html file.
#Drejon's answer was almost what I wanted, but explicitly setting the color, text decoration and font-weight was causing a tags to not take those values from their parent, which is what I desired. Here is what I ended up using:
a, a:link, a:visited, a:hover, a:active {
color: inherit;
text-decoration: inherit;
font-weight: inherit;
}
I'm not exactly sure that I understand. Try if this helps:
a,
a:link,
a:visited,
a:hover,
a:active {
color: #000000; /*color of your choosing*/
text-decoration: none;
font-weight: normal;
}
Is there a way of specifying a:link, a:visited, a:hover, a:active and maybe also a:focus in one go using css?
If you want to style all anchors; not just anchors used as links, but named anchors as well (i.e. <a name="foo"></a>) simply use the following css selector:
a
That's it.
If you don't want named anchors, but instead want to style only links that have an [href] attribute, you should use the comma-separated list of selectors:
a:link,
a:visited,
a:hover,
a:focus,
a:active {
color: blue;
}
If you're running into specificity issues, you'll need to post some HTML code and review CSS specificity.
Just name them all at once and specify the style:
a:link, a:active, a:visited, a:hover, a:focus
{
}
If you specify a single style for all states, you can simply do this:
a{
color: green;
}