I'm trying to stop a link from turning purple when you click it. My link is within a div with the class name "header". My code doesn't seem to work and the link just stays purple.
.header a:visited {
color: black;
}
The :visited selector is used to select visited links. If your HTML looks the same as below it should be working, Possibly you might want to use :focus or :active?
.header a:visited {
color: black;
}
.header a:focus {
color: pink;
}
<div class="header">
sdfsd
</div>
a:visited {
color: black;
}
<div>
Link
</div>
try ctrl + shift + r, might just be a browser cache thing.
Related
This question already has answers here:
Why CSS :active on link doesn't make the current page link highlighted?
(3 answers)
Closed 3 years ago.
This is my CSS to change the default settings of the color of my menu links:
.main-header-menu a {
color: #ffffff !important;
}
.main-header-menu a:hover {
color: #8feaff !important;
}
.main-header-menu a:active {
color: #8feaff !important;
}
All very standard and very normal - yet for some reason the :active state does NOT change.
Can you see any reason why not? I was hoping it would change to #8feaff as written above.
Thanks
The :active selector is used to select and style the active link. A link becomes active when you click on it.
if you want The :active selector is used to select and style the active link. A link becomes active when you click on it.
if you want to apply style if visited the link then use visited.
Google
a:visited{
background-color:yellow;
}
There is no :active state in CSS. You should add .active class
body{
background: black;
}
.main-header-menu{
display: inline-block}
.main-header-menu a {
color: #ffffff !important;
}
.main-header-menu a:hover {
color: #8feaff !important;
}
.main-header-menu a.active {
color: #8feaff !important;
}
<div class="navbar">
<div class="main-header-menu"> <a class="">menu</a> </div>
<div class="main-header-menu"> <a class="active">menu</a> </div>
</div>
I have a ccs sheet with the usual tags
a. {}
a.hover {}
I also have a div=id "footer" that I want to change the font style but the global a. and a.hover are overriding it even when I add a
#footer{
color: #333333
}
Can I override using this or do I need to try? a.#footer or a.hover:#footer
Basically the #footer as is wont work because of the a. mentioned above even though the other elements are working in the #footer div such as margin...just the font color and hover??
Can someone tell me how to style this and not let the global a. interfere with it?
Many thanks
It's all about the hierarchy of code:
HTML:
<div>
Sample link
<div id="footer">
Footer link
</div>
</div>
CSS:
a {
color: #ebebeb;
}
a:hover {
color: #000;
}
#footer a {
color: #3e3e3e;
}
#footer a:hover {
color: #609;
}
Try this piece of code
#footer a,
#footer a:hover{
color:#333;
}
what is dot after a ?
the correct form is a {} , a:hover {} , a#footer and a:hover #footer
If you are nesting a inside div element you need to use
#footer a {
color: #333333;
}
If you only use #footer {} it will apply the styles to div and a won't inherit the color, so you can also write
#footer {
color: #f00;
}
#footer a {
color: inherit;
}
This is a matter of specificity. Styling the <a> elements directly is more specific then just applying some CSS to the <div id="footer"> element and all of its children. You can target any links within your footer by using
#footer a {
color: #333;
}
Due to the descendant selector this rule itself is more specific than the one you're using for all the other <a> elements outside of the footer.
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.
Ok so I have the follow menu:
<div class="header">
<div id="logo"></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
Associated with this CSS class:
.header {
margin:20px 0 55px;
height:68px;
width:inherit;
}
What can I put in my menu tag or my CSS class to make the link not change colors when it is clicked. Currently the link will be blue but once it has been clicked it turns purple. I want it to be say black all the time, clicked or not.
No better way than to quote the specs:
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
a:active { color: gray } /* when element accepts tab focus */
http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes
So this should cover all cases:
.header a,
.header a:link,
.header a:visited,
.header a:active,
.header a:hover {
color: black;
}
http://jsfiddle.net/ZgUZn/1/
Joerg noted in a comment below the question that I omitted :focus. I did, and for a reason, but I'll note why and you can consider if you need it or not:
.header a:focus {
color: white;
background: blue;
font-size: 2em;
}
http://jsfiddle.net/ZgUZn/5/
Go to that link, click in the white part of the page in the bottom, right quarter, then hit the TAB key. You'll see that when that element receives focus, it changes. You can cover that by including this psuedo-class, but it's my understanding that browsers do not have a default setting for this, so unless you set it somewhere else and you need to cancel it out, it might be unnecessary.
NOTE: I seem to remember in the back of my mind recently I found out that just .header a may also work, but honestly I'm not sure how, and I've always understood the above is how it should be done (belt-and-suspenders notwithstanding). Comments welcome on this point.
EDIT
As to the above note, I think I've got an answer:
a,
a:link,
a:visited,
a:hover,
a:active {
background: green;
color: white;
font-size: 2em;
}
.header a {
color: black;
}
http://jsfiddle.net/ZgUZn/6/
The .header a does not override all of the psuedo-selectors if they have been declared elsewhere. Now, if there aren't any others declared, it appears to work in overriding the browser's defaults, but that may be a false-positive.
That's the default colors assigned by the browser for visited and unvisited links. If you don't want it to change then just style the anchor tags.
.header a {
color: black;
}
Is there a reason my below CSS only half works?
div.share
{
position:relative;
top: -4px;
left: 25px;
font-family:Tahoma;
background-color:#000000;
font-size:11px;
font-weight:bold;
}
/* share link css */
a.share:active
{
color: #000000;
}
a.share:hover
{
color: #FFFFFF;
background-color:#000000;
text-decoration: none;
}
The div.share CSS is all working but the CSS for the active and hover is not
CSS is valid, but make sure the link does have the "share" class, if its in the DIV, change the css to:
div.share a:active
{
color: #000000;
}
div.share a:hover
{
color: #FFFFFF;
background-color:#000000;
text-decoration: none;
}
adding your html would make this easier.
I can only guess that you have a <div> with class='share' and no <a> tag with the same.
e.g., does your html look like:
<div class='share'>
<a class='share' href='http://yoursite.com'>Your site</a>
</div>
or
<div class='share'>
</div>
...
<a class='share' href='http://yoursite.com'>Your site</a>
If it's the first, then
div.share a:hover {
...
}
would make more sense.
If it's the second, then the selector looks fine... though it might be better to choose different, but appropriate class names.
Use div.share a:active and div.share a:hover.
The way you have it right now it is looking for an <a> tag with a share class applied directly. However the share class is on the outer div.
Can you show us an HTML snippet using this CSS? Is it really the <a> tag that has the share class or is it nested inside the <div class="share">?