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
Related
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).
I set the a's style to be red, but color of :link doesn't work, why?
I don't click the link, the color of it should be red, but it shows green for me.
a:link{
color: red;
}
a:visited{
color: green;
}
a:hover{
color: blue;
}
a:active{
color: yellow;
}
test
My result:
As suggested, you might want to read up on the rules/ guides before asking a question (been there).
However, to answer your question you do not need to use the :link when styling an a tag, just simply style is as such:
a {
color: red;
}
Here is a working example of what you're after; https://codepen.io/MartynMc/pen/KqYrWY
I was trying to use a class with psuedo class in the less css mixin
a:link{
color:#138CB4;
text-decoration:none;
}
a:visited{
a:link;
color:#84B6CD;
}
But out put I got is this, which an invalid css
a:link{
color: #138CB4;
text-decoration: none;
}
a:visited{
a: link;
color: #84B6CD;
}
Am I missing something here or mixins don't support pseudo classes yet.
I was a little confused by this at first, too, and found myself jumping through hoops to get it to work. Although your post is old enough that it might pre-date this functionality for all I know.
Anyway, if you're just trying to add additional styles to an existing style via pseudo-selectors, you can use the '&' operator. It works kind of like a 'this' keyword, and turns nesting into a simple combination. So you should be able to do:
a {
color: #138CB4;
text-decoration: none;
&:visited {
color: #84B6CD;
}
}
This should compile out to something like:
a {
color: #138CB4;
text-decoration: none;
}
a:visited {
color: #84B6CD;
}
Note that you can also use the & to combine 'sub-selectors':
.outer {
color: blue;
.error {
//this will select elements that are .error inside-of/descending-from .outer
}
&.error {
//This will select elements that are .outer AND .error
color: red;
}
}
The official definition is unfortunately hiding in plain sight in the Nesting Rules part of the documentation.
I don't believe that is how you use mixin's in Less.
You have defined the link pseudo class and then nested it under the visited pseudo class. This doesn't actually mean anything and is why your are getting that output.
If I think what you are aiming for is to re-use your link styles across :visited and :link, you actually will want this:
.link {
color: #138CB4;
text-decoration: none;
}
a:link {
.link;
}
a:visited{
.link;
color: #84B6CD;
}
Not fully sure, what you want to achieve. But if you got tired of :link,:visted,:active (aka normal link) vs. :focus, :hover (hover styles), this works:
.anchor( #- ) {
a, a:link, a:visited, a:active {
#-();
}
}
.anchorH( #- ) {
a:focus, a:hover {
#-();
}
}
for example:
.anchor({
background: #fff;
});
.anchorH({
background: #ddd; /* darken on hover or focus */
});
please consider these styles:
a:link { color: blue }
a:visited { color: red }
a:hover { color: green }
a:active { color: black }
#special:link { color: pink }
And now this markup:
Normal link
Special link
I expect the "special" link to be pink while keeping the other colors. However, pink replaces the other colors.
Why is this happening? How could I fix it? Thank you.
Its aggravating...and order matters here:
a:hover{
color:green;
}
a:visited{
color:red;
}
This means that unvisited links will turn green when you hover over them, and visited links will stay red when you hover on them.
Switch:
a:visited{
color:red;
}
a:hover{
color:green;
}
This means that both visited links and unvisited links will turn green when you hover on them. I hate that the order of these properties changes the behavior; the hover style should take effect regardless.
a:link{
color:blue;
}
a.one:hover{
color:green;
}
a.one:visited{
color:red;
}
a.two:visited{
color:red;
}
a.two:hover{
color:green;
}
<a href=#ddd class=one>One (wont change color on hover when visited)</a> |
<a href=#ddd class=two>Two (always turns green on hover)</a>
I believe it has to do with CSS priority order.
Because #special is an ID, it dwarfs any element-level style applied. (This can be proven in Firefox Firebug/Chrome Inspector and how the inherited style sheets are all over-written by the ID's style).
Though, considering there is no "present style" applied for :active, :visited, etc. It would stand to reason these styles would still be un-affected. Yet, making the following change to your hover seems to kick it back in to gear:
a:hover { color: green !important; }
Why is this happening?
Styles for the :link pseudo-class apply to all links states, so it includes :hover, :visited and :active
This is what I have observed since I started using CSS years ago. I don't know if it's how it is supposed to work but it is how I have seen it working and expect it to work.
So when, you set a style for #special:link, that style also applies to #special:hover, #special:visited and #special:active
Note that the use of an ID does not change much here.
If you try it with the below CSS, you will have both links pink... even for :hover state
a:link { color: blue }
a:visited { color: red }
a:hover { color: green }
a:active { color: black }
a:link { color: pink }
How could I fix it?
You can use !important as suggested by Brad or set the various states styles for #special together with the regular links.
a:link { color: blue }
#special:link { color: pink }
a:visited, #special:visited { color: red }
a:hover, #special:hover { color: green }
a:active, #special:active { color: black }
Here is another quick way around:
You can use :not(:hover).
#special:link:not(:hover) { color: pink }
DEMO
No, it is not going to use the other colors because of its ID, in such case you should add the rest of actions and colors to the ID.
For example, the link that you have, the "special" one, when over will say.
Ok, I'm 'a' ... link ... and my ID is .. special, so, I will keep the special parameters.
That's why that's not going to change.
Hope this helps,
I have some HTML markup in my ASP.NET master page representing a basic navigation menu. THree words that link to three pages. My CSS and HTML are included below for your reference.
When I load the page, the links appear with the correct color (red). If I hover over a link, the link changes to the correct color (blue). So far, we're good. Clicking a link changes the link color to the correct color (yellow). The two remaining links are still red / blue as expected. Clicking a second link changes that link to yellow also. Now I have two yellow links. Neither yellow link displays the hover color (blue) like I'd prefer. Clicking the third link causes it to be yellow, too and none of the links display the hover style.
Although a link has been clicked, I'd like the color to be stored and have the hover color displayed. How do I accomplish this? This is an ASP.NET web application project but I'm only using straight HTML at this point.
/* --- css --- */
a:link
{
color: red;
text-decoration: none;
}
a:hover
{
color: blue;
text-decoration: none;
}
a:active
{
color: green;
text-decoration: none;
}
a:visited
{
color: yellow;
text-decoration: none;
}
/* --- HTML --- */
<p class="MenuItems">
Cars.
Trucks.
Vans.
</p>
As described here, the :hover declaration must come AFTER the :visited and :active declarations.
Basically, in the cascade of your current styles, you won't ever see the :hover color.
Your
a:hover
declaration must come after your
a:visited
declaration in the stylesheet because the visited state is currently taking priority. Always put hover at the end of the a styles declaration block to prevent this.
a:link -> a:visited -> a:active -> a:hover is the optimal ordering.
Just use this:
a:hover
{
color: blue ! important;
text-decoration: none ! important;
}
or as described - use this order:
a:link
{
color: red;
text-decoration: none;
}
a:active
{
color: green;
text-decoration: none;
}
a:visited
{
color: yellow;
text-decoration: none;
}
a:hover
{
color: blue;
text-decoration: none;
}