Active property is not working in Firefox; I used this code:
#selec:active{background-color:red;}
The property works in Chrome, but not working in Firefox.
Let me assume that you have really understood what :active means in CSS. It applies style right at the moment when you are clicking. So it those styles wont last long if the page refreshes.
Even though it is not much big deal, there is an order to style these if you applying :hover :link and :visited.
Please check whether you followed them
a:link { /* Essentially means a[href], or that the link actually goes somewhere */
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: green;
}
a:active {
color: red;
}
Related
Why do most modern browsers (except Firefox) not support setting a CSS variable in a:visited?
This is not working in Chromium based browsers, Safari, etc.:
a:visited {
--bg-color: red;
}
But all browsers support setting variables in a:hover:
a:hover {
--bg-color: red;
}
Here's a demo: https://codepen.io/mamiu/pen/YzvXXqw
Chrome disabled css for :visited unless its only for a color change.
Like so..
a {
background-color: grey;
}
a:visited {
background-color: green;
}
As pointed out by #Tybo this doesn't work for privacy reasons.
The solution is to simply chain CSS selectors and to change the CSS properties directly instead of using variables.
a:visited span.some-child-element {
background-color: red;
}
I've also updated the demo: https://codepen.io/mamiu/pen/YzvXXqw
It may just be me, but sometimes I think im starting to get the hang of this css stuff' and then it goes back to 'I dont have a clue.'
so, I have a default style
a:focus,
a:hover,
a:active {
outline: 0 none;
text-decoration: none;
color: #fff;
}
but on a couple of <a href..> I need to overwrite the style,
so I have added the following to my css
a.myBlue a.myBlue:hover {
color: #3078ef ;
}
.myBlue a:hover {
color: #3078ef ;
}
(Yes, I've done this twice)
and applied
But in Chrome, looking at developer tools its still applying the standard style, it does not even pull "myBlue" down?
Where am I going wrong?
The css selector:
a.myBlue a.myBlue:hover
Means "Any a of class myBlue that is being hovered over and is a child element of an a of class myBlue.
If you wish to apply the same style to multiple selectors, you need to separate each selector with a comma:
a.myBlue, a.myBlue:hover
There is a typo mistake in your code...Use below code. it works...
a.myBlue, a.myBlue:hover {
color: #3078ef ;
}
Your CSS selector is wrong, how you've got it present means it only applies the rule when you hover over an element with the class of .myBlue which is the child of another element with the class of .myBlue. So instead your selector needs to be
a.myBlue, a.myBlue:hover { /* notice the comma */
color: #3078ef ;
}
Not sure what I did last night but now I get up this morning and chrome seems to be overriding my anchor and input styles. I wish there was a snippet of code I could post here but I have no idea what code could possibly be causing it. i don't want to put !mportant all over the place to fix it so I am hoping someone can look at the test site and figure out what chrome doesn't like.
The headerWidgets at the top of the page (email, phone, and search) should not have decoration and should change color on hover. I can't even place the cursor in the search input anymore. And the nav menu shouldn't have decoration, but the hover works. Go figure. chrome dev tools shows me this:
a:-webkit-any-link { user agent stylesheet
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
and a bunch of user style sheet entries for input
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
is the default styles of webkit for the a tag.
Add a css selector #email a,#phone a and put the styles you want inside. Like this:
#email a,#phone a{
text-decoration:none;
}
and for the hover:
#email a:hover,#phone a:hover{
color:red;
}
A better selector to target all anchor tags inside #headerWidgets
#headerWidgets a {
color: #F00;
}
#headerWidgets a:hvoer {
color: #CCC;
}
And the reason why you cant click on your search box anymore is that div#headerMenuWrapper is blocking the way. On dev tools hover on this element <div id="headerMenuWrapper" class="clearfix"> you will see it covering #headerWidgets
I am trying to change the color of a link. It is defaulted to blue and I want to override it. I did the following:
#site-links a:link{color:red;}
and in Chrome's Inspect Element that was the style which overrode all other styles. However, the link remained blue. In Firefox, however, the link is now red.
How can I fix this?
:link targets specifically a link you have not visited. I'm going to go ahead and assume that in chrome you have visited it. You can fix it by targeting each case as you need it:
a:link { color: red; } /* unvisited link */
a:visited { color: blue; } /* visited link */
a:hover { color: green; } /* mouse over link */
a:active { color: yellow; } /* selected link */
One way to give higher priority to your rule is stating important in it.
a:link { color: red ! important }
Also, when in Chrome inspector , to better control what is happening, you can force the state of the inspected element
When in the element inspector, go to the top of the "styles" bar in the right pane. There is an option that states:
"toggle element state"
There you can check / uncheck the :visited status
Ref: Forms, Post and submit buttons
Following on from my last question, I've attempted to style my input tags.
I tried
.as_link {
background: transparent;
border: none;
cursor: pointer;
padding: 0px;
}
.as_link:link {
background: transparent;
border: none;
cursor: pointer;
padding: 0px;
}
.as_link:visited {
background: transparent;
border: none;
cursor: pointer;
padding: 0px;
}
.as_link:hover {
text-decoration: underline;
background: #F4F0F0;
}
but read somewhere that you're not meant to select elements in this fashion for pseudo-classes so I tried:
input.as_link {
background: transparent;
border: none;
cursor: pointer;
padding: 0px;
}
input.as_link:link {
background: transparent;
border: none;
cursor: pointer;
padding: 0px;
}
input.as_link:visited {
background: transparent;
border: none;
cursor: pointer;
padding: 0px;
}
input.as_link:hover {
text-decoration: underline;
background: #F4F0F0;
}
Still no dice on the hover. The standard does take effect but the hover does nothing. My question is this:
What are the rules on assigning pseudo-classes in general? Not just in my case above but are they only for anchors or can you use them for any elements?
Thanks in advance.
Edit: this is not local to IE. This problem happens in Opera 9 and FF3 as well.
Edit2: I feel it has something to do with the fact hover needs link and visited prior to it. It seems as though the browsers ignore link and visted if they don't have an anchor tag around them? This is purely speculating but I wonder if it holds any merit?
Not just in my case above but are they
only for anchors or can you use them
for any elements?
Well, no. CSS pseudo-classes are used to add special effects to some selectors.
The syntax of pseudo-classes:
selector:pseudo-class {property:value}
CSS classes can also be used with pseudo-classes:
selector.class:pseudo-class {property:value}
Anchor Pseudo-classes
Links can be displayed in different ways in a CSS-supporting browser:
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 */
Pseudo-classes can be combined with CSS classes:
a.red:visited {color:#FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
If the link in the example above has been visited, it will be displayed in red.
The :first-child Pseudo-class
The :first-child pseudo-class matches a specified element that is the first child of another element.
In the following example, the selector matches any element that is the first child of any element:
<html>
<head>
<style type="text/css">
p:first-child
{
color:blue
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
Pseudo-classes
The number indicates in which CSS version the property is defined (CSS1 or CSS2).
:active Adds a style to an element that is activated 1
:first-child Adds a style to an element that is the first child of
another element 2
:focus Adds a style to an element that has keyboard input focus 2
:hover Adds a style to an element when you mouse over it 1
:lang Adds a style to an element with a specific lang attribute 2
:link Adds a style to an unvisited link 1
:visited Adds a style to a visited link 1
More information here.
If you're looking for rules for assigning pseudo-classes in general, this link will help you:
http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes
You can use pseudo-selectors for any element you like, whether the browser/user-agent interprets or applies them is, sadly, entirely up to them.
A detailed review of css pseudo-selectors (I couldn't find one specifically limited to pseudo-selectors) is over at: Quirksmode.
In short IE6 is a problem for :hover and :active on anything but links; IE 7 plays slightly better, but only supports :active on non-links.
IE8 seems to be pretty well up-to-spec, insofar as css2.1 pseudo-selectors go.
I think I just found the answer....
My code was flawed.
input.as_link:hover {
text-decoration: underline;
background: yellow;
}
input.as_link:focus {
text-decoration: underline;
background: yellow;
}
input.as_link:focus:hover {
text-decoration: underline;
background: yellow;
}
Underscore doesn't work because it's not "text" and the text isn't highlighted. Shame but oh well, the background colour I chose didn't show up... I guess I typed in one incorrectly (or the same as the background). The bright yellow worked.
Thanks to everyone who replied though!