i have problem with a:visited and a:link for 2 class/id.
#title a:link, #title a:visited {
color:black;
}
#PageCounter a:link, #PageCounter a:visited {
color:green;
}
output:
all link of #title and #PageCounter are color black.
but i want #PageCounter all on color green.
i did tried test with "#title:visted" and "#title :visited" and "#title visited"... is not work. =/
(example)HTML format:
<div id="title">Hello World</div><br><br>
<font id="PageCounter">1,2,3,4,5,6,7,....</font>
Are the anchor tags direct descendants of the elements with the IDs 'title' and 'PageCounter'? If so, you might want to use the child selector:
#title > a:link, #title > a:visited {
...
}
#PageCounter > a:link, #PageCounter > a:visited {
...
}
The selectors you show in your question will affect any anchor elements within the elements identified by 'title' and 'PageCounter', regardless of how deeply nested they are. It might be possible that one of those selectors is 'hiding' the other. Using the child selector makes it more explicit.
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).
Kind of hard to explain, so here's some code.
So I have this CSS, which makes all links an orangish color. It encompases the entire page.
#pageContent a:link,a:visited, a:hover, a:active {
color: #EE4036;
}
And then I have an element of id sideMenu somewhere within the pageContent id,
#sideMenu a:link, a:visited, a:hover, a:active{
color:#58595B;
}
The problem is that for some reason sideMenu's given link color is overwriting pageContent's link color for links that aren't children of sideMenu.
for example, if I had
<div id="pageContent" >
<a>this text should be #EE4036</a>
<div id="sideMenu">
<a>this text should be #58595B</a>
</div>
</div>
sideMenu's <a> text content would get set to the color #58595B as expected, but so would pageContent's, which is what I wouldn't expect.
I'm a bit new to CSS so I feel like I'm missing some super obvious rule and google isn't helping at all. So, anyone know what's going on?
You would need to prefix each selector with the ID:
#sideMenu a:link, #sideMenu a:visited, #sideMenu a:hover, #sideMenu a:active {
color:#58595B;
}
Currently, your selector says match "links that are descendants of an element with ID "slideMenu", links that have been visited, links that are being hovered, and active links".
Basically, when you use the comma to create a group of selectors, each individual selector is completely independent. There is no relationship between them.
Well, you are actually redefining the same rule. You must write down each time the #sideMenu or #pageContent. Here it is:
#pageContent a:link, #pageContent a:visited, #pageContent a:hover, #pageContent a:active {
color: #EE4036;
}
#sideMenu a:link, #sideMenu a:visited, #sideMenu a:hover, #sideMenu a:active {
color: #58595B;
}
Voila. Hope it helps.
Is there a way to merge this selector:
ul#social_footer li a:link,
ul#social_footer li a:visited {}
I want the same selector for the ul with ID #footer_navigate to be selected for both anchor states.
Is this the only way to do it?
ul#social_footer li a:link,
ul#social_footer li a:visited,
ul#footer_navigate li a:link,
ul#footer_navigate li a:visited {}
You could, on the assumption there's no other a elements in there that you don't want to affect, shorten that to:
ul li a:link,
ul li a:visited {
/* css */
}
This approach does present the problem that you'd have to override the given styles for other links that matched by the same selector.
I'd suggest using classes instead, though, to identify those links that share styles:
ul.navigation li a.happyColors:link
ul.navigation li a.happyColors:visited {
/* CSS */
}
Which does, obviously, require editing of the html to add those (or whatever) classes you choose to use instead.
You can add a additional common class at all tag ul that should have your two selector.
In this case you can use only this css:
ul.*commonClass* li a:link, ul.*commonClass* li a:visited {}
<ul id="social_footer" class="*commonClass*" >...</ul>
<ul id="footer_navigate" class="*commonClass*" >...</ul>
Maybe like this :
ul#social_footer li a:link, ul#social_navigate li a:link{
}
ul#footer_footer li a:visited, ul#footer_navigate li a:visited{
}
I know you have found adding a class as an acceptable answer (and it is). You may also want to check out lesscss as a way to programmatically apply css stylings.
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;
}
This should be an easy solve but I'm not sure why this is happening. I have a div with an id of test and inside that div, I have a paragraph tag with a link.
Currently, within the test class, the links are not visible and I don't understand why. I want a global pseudo class for links that I do not want anything special for. That should be be the code in the following 4 lines.
a:link {color:#000;text-decoration:none;}
a:visited {color:#000;text-decoration:none;}
a:hover {color:#000;text-decoration:none;}
a:active {color:#000;text-decoration:none;}
Where I do want to do something special, I can refer to the #test class as I have it below that the browser should only use that class within the test div and nowhere else. Am I incorrect on this?
#test p a:link, a:visited, a:hover, a:active {color: #FFFFFF;}
FF shows me that test is being used outside of the test div. In other words, on a totally different page where test is not even used, I can see that the test class is being used.
CSS does not work that way. You have to define #test for each one. Example:
#test p a:link, #test p a:visited, #test p a:hover, #test p a:active {
color: #FFFFFF;
}
#test p a:link, a:visited, a:hover, a:active {color: #FFFFFF;}
should be
#test p a:link, #test p a:visited, #test p a:hover, #test p a:active {color: #FFFFFF;}
You forgot to add the reference to the test div for each of the link pseudo classes