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>
Related
I've got a CSS prob i'd love some help with.
My site (www.melodylakerart.com) has a 'Read More' link in its cookie notice bar (to the right of the privacy notice).
The 'read more' link is currently only visible on mouse over. Since the cookie bar is black I therefore assume the link text is black untill mouseover
I just want to make the text a colour other than black so you can see the link without having to mouseover. I've tried the below CSS with no luck. Can anyone help?
.cn-more-info .cn-privacy-policy-link .cn-link .button {color: #feb8b4 !important;}
.cn-privacy-policy-link {color: #feb8b4;}
.cn-more-info .cn-privacy-policy-link .cn-link .button {color: #feb8b4;}
Link color can be changed via a:link or under a specific class
.cn-privacy-policy-link a:link
for example:
a:link {
color: red;
text-decoration: none;
}
a:visited {
color: green;
}
a:active {
color: black;
}
a:hover{
color: #bada55;
}
.test a:link{
color: yellow;
}
Example
<div class="test">Yellow link</div>
You can also change the link color on hover by a:hover or the link color after being clicked by a:visited or while being clicked with a:active
The problem is that you have this:
input[type="submit"], button, .button {... color: #000000!important; ...}
And that is the classic reason why !important is a bad practice.
If all other parts work as expected, you need to trigger one of the element's classes. For instance: cn-privacy-policy-link {color: #feb8b4!important;} will work.
This question already has answers here:
Why doesn't this CSS :not() declaration filter down?
(3 answers)
Closed 4 years ago.
I'm trying to apply :hover only on desktop visitors of a webpage, and :active on the others. I'm setting the mobile class to the body element on the touchscreen devices version, and I put these lines in my css for the buttons in the document (elements with btn class) :
.btn {
background: blue;
color: white;
border-color: white;
}
:not(.mobile) .btn:hover {
background: red;
color: blue;
border-color: black;
}
.mobile .btn:active {
background: red;
color: blue;
border-color: black;
}
Here is an example of how this mobile webpage could be coded :
<html>
<body class="mobile">
<h1>TITLE</h1>
<div class="btn">button</div>
</body>
</html>
The problem is that when browsing on the mobile page, the :hover pseudo-class is still selected even if the button is a child of the body with the mobile class ! Am I incorrectly understanding :not(.mobile) .btn:hover ?
I think it should select any immediate/distant element that has the btn class and is being hovered, and is a child of an element that doesn't have the mobile class...
I also tried others solutions like media queries, but I couln't get them to work as I expected.
The fiddle : https://jsfiddle.net/162tn8ko/
Thank you for reading my bad english
Right now, that selector is matching the html element, with the child of div.btn. To ensure it's a direct child, use >.
.btn, .btn_noborder {
background: blue;
color: white;
border-color: white;
}
/* note the following line */
:not(.mobile) > .btn:hover, :not(.mobile) > .btn_noborder:hover {
background: red;
color: blue;
border-color: black;
}
.mobile .btn_noborder:active, .mobile .btn:active {
background: red;
color: blue;
border-color: black;
}
<html>
<body class="mobile">
<h1>TITLE</h1>
<div class="btn_noborder">button</div>
</body>
</html>
Thank you jhpratt, your answer helped me understand that the :not(s) was indeed applied on the html element. As Temani Afif guessed, in my code the btn is not a direct child of the body ; but here is what I was looking for :
body:not(.mobile) .btn:hover { ... }
complete solution : https://jsfiddle.net/162tn8ko/6/
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.
I am learning to do a bit of css but I have ran into a snag. I am unable to add a css link, hover or active state on the 'create account' of my html. I am using the <p> tag to do the styles and positioning. The link works fine but I can't add styles? Any help correcting the html will be welcome
<p>
Join with us
<span class="fontawesome-arrow-right">
Create account
</span>
</p>
Here is a generic CSS code for what you are trying to do:
<style>
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
</style>
You can read more at CSS Pseudo-classes
Cheers !!
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;
}