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
Related
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.
I'm creating a website for a small company. The project was started by an amateur website designer, and I have taken over the project.
Every day I discover new flaws in the css, but now I've something odd, and I cannot find the cause.
The problem is the link on the webshop page of this website: http://o-vita.nl/webshop.php
Beneath "Link naar onze webshop:" there is a link that stays white when I click on it. I cannot find the cause of this in the css...
Since I don't know where the problem lies, I cannot show you the code. You have to find it by viewing the source code of the page.
In the file css.css (which is in the folder "css", which gets redundant fast...):
.footer a:link, a:active, a:focus, a:visited {
color: #FFFFFF;
text-decoration: none;
}
I think the big problem here is how these rules are being referenced. This line:
.footer a:link, a:active, a:focus, a:visited
Basically means:
An a:link in a .footer element
ANY a:active on the page
ANY a:focus on the page
or ANY a:visited on the page.
I'll bet the latter three selectors in that rule should also be limited to .footer, but that's up to you.
In your css.css file, line 249, you have a rule:
.footer a:link, a:active, a:focus, a:visited
{
color: white;
}
Change the color in that line.
.footer a:link, a:active, a:focus, a:visited
Make a:visited an alternate CSS entry with a different color and remove it from here. Like:
.footer a:visited {color:blue}
Also the whole line is wrong as it looks like they are trying to do:
.footer a:link, .footer a:active, .footer a:focus, .footer a:visited
But messaged up the syntax.
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;
}
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.