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,
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
So my links are the right color, my links turn the right color when visited, but my links aren't changing to the green they're supposed to when I hove over them?
.header p a{
color: white !important;
}
.header p a:visited{
color: #FF859C !important;
}
.header p a:hover {
color: #BCD955 !imporant;
}
You're getting a little overzealous with the !important modifier, and since :visited and :hover are equal specificity, :visited wins out because it was declared first.
Get rid of all the !important modifiers and it'll work as expected.
Here are two examples based on this HTML.
<a href="#">
<div class="foo">
hello
<span class="bar">world</span>
</div>
</a>
In the first one, I make the link not underline on hover, then make a sub-portion of the link underline, and that works fine:
a {
text-decoration:none;
}
a:hover {
text-decoration: none;
}
a:hover .bar {
text-decoration: underline;
}
http://jsfiddle.net/3qPyX/1/
In the second, I now reverse the selectors so that the second word should be un-underlined. However, now something strange happens. The entire link remains underlined even though the selectors seem like they should remove underline from the second word. <-- (this is the question. why does this happen?)
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
text-decoration: none;
}
http://jsfiddle.net/EAmwt/
Can someone explain what's going wrong in the second example? Inspecting with Chrome shows the span.bar has a computed style of text-decoration:none.
Update: a few answers explaining how to get around the problem, which is great except that's not really my question. What I want to know is why is this behavior different than, say, bold? For instance, if I try the 2nd example with bold, I get the expected results: http://jsfiddle.net/3qPyX/4/
Explanation:
The problem is that some properties (like text-decoration) get drawn to the whole parent inline element, whereas others - like font styling (that get inherited) - get overriden by the children properties.
Just for illustration: simmilarly, if you set a background color to a parent element it will paint the background of the parent ... and you would have to set another color to a child to lay it over (default - transparent - will still show the parent style through), but if you set font-weight at a child it will apply to the text inside the child element and override the parent settings.
You can find more detailed stuff on the text-decoration property in the CSS Level 2 and Level 3 Specifications.
A simple solution
withot changing the markup, you could just display .bar as inline-block.
Like so:
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
a:hover .bar {
display:inline-block;
}
And the inline-block breaks out of the inline/text styling of the parent anchor element =) And you can then style it independently:
DEMO
When you do the text-decoration it is applied to the entire line at once. So the a:hover .bar doesn't cause any effect, because the underline is not being applied in the .bar but on the a.
Here is the specification: http://www.w3.org/TR/CSS21/text.html#lining-striking-props
UPDATE! (As #Cam suggested) :
You need the add in separate elements the parts of your text: http://jsfiddle.net/3qPyX/5/
The CSS:
.foo, a:hover .bar, a {
text-decoration:none;
}
a:hover .foo {
text-decoration: underline;
}
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;
}
So we're required to use the following order for CSS anchor pseudo-classes
a:link { color: red }
a:visited { color: blue }
a:hover { color: yellow }
a:active { color: lime }
But my question is why bother with the a:link part? Rather, is there any advantage to the above (other than perhaps clarity) over:
a { color:red; } /* notice no :link part */
a:visited { color: blue; }
etc.,etc.
:link selects unvisited links, that is: anchors with an href attribute which have not been visited by the browser (for whatever definition the browser vendor has for "visited").
If it has :link then it will never match <h1><a name="foo">A foo to be linked to</a></h1>
(Although you should be using <h1 id="foo">A foo to be linked to</h1> these days.)
Aside from that, it does make it clearer what it is for.
a { color: orange }
a:link { color: blue }
a:visited { color: indigo }
a:hover { color: green }
a:active { color: lime }
<a>my anchor without href</a>
<br><br>
my anchor without href
(They also have different levels of specificity)
Just "a" refers to ALL possible links (unvisited, visited, hovered, and active), whereas "a:link" just refers to normal unvisited links.
If you use "a" instead of "a:link", you are setting the default CSS for ALL links to whatever "a" is set to. In this specific case, since you specify each possible pseudoclass, it essentially doesn't matter whether you say "a:link" or just "a"
So in the first group, where you write out all the pseudoclasses (a:link, a:visited, etc), you are specifying the CSS for each possible case WITHIN "a"
a:link { color: red } //set unvisited links to red
a:visited { color: blue } //set visited links to blue
a:hover { color: yellow } //set hovered links to yellow
a:active { color: lime } //set active links to lime
In the second group, where you just write "a", you are actually setting the default CSS for all links to what you write in the first line, then redefining the CSS for the other pseudoclasses
a { color: red } //set ALL links to red!
a:visited { color: blue } //hm, never mind, let's set visited links to blue
a:hover { color: yellow } //hm, never mind, let's set hovered links to yellow
a:active { color: lime } //hm, never mind, let's set active links to lime
http://www.w3schools.com/css/css_pseudo_classes.asp
:link is when the link is unvisited. So when there is an anchor with a href attribute and the user have never been on the page behind the anchor.
Selector :link is a pseudo-element selector for hyperlinks, any element that is an hyperlink will be matched. The a selector will match "only" anchor elements.
Normally, every a element is also a hyperlink, and I'm not aware myself of any way to create an hyperlink in HTML without using an anchor, so you can probably use either of them in most cases.
However, using only a will match anchor elements that are not hyperlinks. For example, an anchor element written this way <a name=sign-up>Sign up form</a> will not match the hyperlink pseudo-element :link selector but will match the a selector.