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}
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).
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 stated the .topics:link in CSS but the color is still blue.
HTML is -
<ul class="topics">
<li>United States</li>
</ul>
CSS is -
.topics:link {
color: #666665;
}
You're using :link wrong. Use .topics a instead:
.topics a {
color: #666665;
}
.topics a{
color:#666665;
}
Use this
if you only want to change the color of text in <a> tag then use this
.topics a { color: #666665;}
The :link selector is used to select unvisited links.
like
a:link
{
background-color:yellow;
}
these are some pseudo class of a tag
a:link {color:green;}
a:visited {color:green;}
a:hover {color:red;}
a:active {color:yellow;}
I'm trying to show the current page link in a different color. I've found other answers that will do this, but its still not working. I'm using a class of current_link on the respective links of each page. I also found an answer that said to apply the !important tag to the color rule but that didn't do anything. I'm thinking I have something small wrong or that I'm not aware of. Maybe some kind of ordering rule.
Here's the CSS rules relative to my links. As you can see I have .current_link at the top (I figured this would get rid of any ordering/over riding issues). The relative HTML naming will follow.
.current_link {
color: #00AD26;
}
#main_nav a:link, a:visited {
text-decoration:none;
color: #00A3E6;
}
#main_nav a:hover {
text-decoration: none;
color: #A8EDFF;
}
#main_nav a:active {
text-decoration: none;
color: #00B7FF;
}
a:link, a:visited {
text-decoration:none;
color: #00A3E6;
}
a:hover, a:active {
text-decoration: none;
color: #00B7FF;
}
Relative HTML from one of the pages.
<ul id="main_nav" class="grid_5 prefix_9">
<li id="home" class="current_link">Portfolio</li>
<li id="about">About</li>
<li id="contact">Contact</li>
</ul>
Your .current_link matches the <li>.
The <a> inside the <li> overrides the color it inherits from its parent element.
You need to apply the color to the <a> itself, either by moving the class or by changing the selector to select <a> elements inside the <li>.
Also, lower rules override earlier ones (if they have the same specificity).
Try this:
.current_link a {
color: #00AD26 !important;
}
You should use:
#main_nav li.current_link a {
color: #00AD26;
}
This will overrule the other selectors and avoids using !important.
How can I add style for Anchor in GWT using UIBinder? I have following piece of code in UiBinder template XML:
<g:Anchor ui:field="forgotPassLink">Forgot password?</g:Anchor>
I know that .gwt-Anchor { } is used for styling this widget, but still no idea how to style hover effects. In normal CSS it would go like this:
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Do I have to handle this with BlurEvent and FocusEvent handlers on Anchor? If so ...that is boilerplate code..
Use the same CSS pseudo-classes with the gwt-Anchor class:
.gwt-Anchor:link {color:#FF0000;}
.gwt-Anchor:visited {color:#00FF00;}
.gwt-Anchor:hover {color:#FF00FF;}
.gwt-Anchor:active {color:#0000FF;}
You can also use a.gwt-Anchor but it isn't strictly necessary.
If you are using uibinder with the gwt HyperLink, it can be done like this:
<ui:style>
.mystyle a:link {
color:#3F3F3F;
text-decoration:none;
}
</ui:style>
<g:FlowPanel>
<g:Hyperlink styleName='{style.mystyle}'/>
</g:FlowPanel>
Does this work (using UIBinder style names) ?
<ui:style>
.a:link { color: #FF0000; }
.a:visited { color: #00FF00; }
.a:hover { color: #FF00FF; }
.a:active { color: #000FF; }
</ui:style>
<g:HTMLPanel>
<g:Anchor ui:field="forgotPassLink" styleName="{style.a}">Forgot password?</g:Anchor>
</g:HTMLPanel>
Define your style like this:
<ui:style>
.menuItem a:link {color: white;}
.menuItem a:visited {color: white;}
.menuItem a:hover {color: white;}
.menuItem a:active {color: white;}
</ui:style>
And use it like this:
<g:Hyperlink styleName="{style.menuItem}" targetHistoryToken="home">Home</g:Hyperlink>