Odd CSS behavior.
When i set the visited color using CSS(a.nav:hover as below example) then the hover doesn't work once the link is visited by the user. However when i set it with the reference of the parent element(.header a.nav:hover as below) it works. why ?
a.nav:visited{
color:yellow;
}
/*once the link is visited by user this rule not working*/
a.nav:hover{
color:red;
}
/*if we use this rule it works even after the link is visited*/
.header a.nav:hover{
color:red;
}
<div class="header">
<a class="nav" .. >test </a>
</div>
It sounds like a specificity issue. Do you have any other a pseudo-selectors in your CSS? If there's a selector which is more specific than a.nav:hover (such as .header a.nav:hover) then it will override it, regardless of its position in the file.
a.nav:hover,
a.nav:visited:hover{
color:red;
}
or
a.nav:hover{
color:red !important;
}
Should make it work.
Related
I need change a color for this element
<div class="box download">
<div class="box-inner-block">
Plugin Windows
</div>
</div>
I call a from CSS with:
.download.box-inner-block a {
color: white!important;
}
But it does not work, why? I need this color only for the element in .box-inner-block inside .download.
Is this what you are looking for as understood in your question ?
If so you need to carefully watch how you indent and construct your css.
As you can see in my snippet I added a space between:
.download .box-inner-block a
in order to make that work.
You can also remove !important from you css as it will not be useful in that case. If you need it, don't forget to add a space bewtween white and !important
.download {
background-color: black;
}
.download .box-inner-block a {
color: white;
}
<div class="box download">
<div class="box-inner-block">
Plugin Windows
</div>
</div>
You are using the wrong selector, as .download.box-inner-block selects elements which has both download AND box-inner-block classes.
<div class="download box-inner-block"/>
To target nested elements, leave a space between the two class selectors. So the correct selector in your case is:
.download .box-inner-block a {
color: white;
}
In this case you can drop !important too.
I have this character code <span class="psi">Ψ</span> for a psi greek character.
This is the css code for
.psi{
color:red !important;
}
the class psi.When i try the code out in my firefox web browser,the character is not red. Why is this?.
That can happen only if you have another rule (more specific) with !important that also applies to that element.
For example
#wrapper span{
color:blue !important;
}
.psi {
color:red !important;
font-size:3rem;
}
<div id="wrapper">
<span class="psi">Ψ</span>
</div>
So check for overlapping rules.
(and try to not use !important. You should be able to do what you want by using more specific css rules)
You cannot change the color of some html entities in Firefox (at least up to 60.0b8). Some examples are ❓ and 📖:
.psi{
color:blue !important;
}
<span class="psi">❓</span>
It works in Chrome.
I'm trying to get text color to change and the text to be underlined when the link is selected (it will have class "selected"). For some reason I can't get it to work even with !important. And yes, I know "a" should be inside "li" :)
HTML:
<a href="">
<li class="list selected">
<table>
<tr><td class="first">Text here</td><td class="second"><div class="icon-arrow-down"></div></td></tr>
</table>
</li>
</a>
CSS:
table {
.selected {
color:green !important;
text-decoration:underline !important;
}
}
Here's my fiddle http://jsfiddle.net/vwLu8/1/.
Your selectors should not be nested unless you're using a preprocessor, you also need to change your level of specificity, change your CSS to:
Demo Fiddle
.selected table td{
color:green;
text-decoration:underline;
}
More on specificity from MDN
Specificity is the means by which a browser decides which property
values are the most relevant to an element and gets to be applied.
Specificity is only based on the matching rules which are composed of
selectors of different sorts.
I am trying to override my default CSS in my WordPress theme's settings, but am having a heckuva time doing so.
Here's what my top menu looks like:
And the same goes for the submenu links when hovering over the top links:
I'd like the links to be white ... obviously the blue doesn't show up well at all.
Here's what I get when I Firebug the "About" link:
And when I right click the Firebug and copy the HTML, here's what part of it looks like:
<ul class="menu" id="menu-mega-menu"><li class="menu-item menu-item-type-custom menu-item-
object-custom level0 has-sub" id="menu-item-3462"><a href="#"><i class="icon-thumbs-
up"></i>About<i class="icon-caret-down"></i></a>
<div class="sub-content" style="display: none;"><ul class="columns">
<li><ul class="list"><li class="header">The Basics</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page level2" id="menu-
item-155">Our Mission</li>
I've tried using #MashMenu, .menu-mega-menu, .mashmenu, and always do a color:#FFFFFF!important; but nothing ever gets rid of that blue. I don't know if I provided enough information here, but any help in guiding me in the right direction would be truly appreciated!
My blog is located at http://www.occupyhln.org
I'm not sure if the color is coming from the wordpress theme or from the user agent stylesheets, but the latter do tend to have higher specificity selectors for a that will prevent the simple a selector from working the way you want.
Inherited values are not related to selectors. You need to actually select the a to override other selectors for its property. For example:
.wordpress-theme a {
/* Selects <a> and sets the color
color: blue;
}
#MashMenu {
/* Selector has higher specificity but does not select <a> */
color: red;
}
#MashMenu a {
/* Selects `<a>` with higher specificity */
color: red;
}
I believe you need to apply the color override directly to the the <a> tag your are trying to effect. You probably have something more high-level that is dictating the color.
Consider this simple example:
HTML
<ul>
<li>
<a href='http://google.com'>Here is a link</a>
</li>
</ul>
CSS
li {
color: red;
}
li a {
color: green;
}
The original css is more specific and has the !important value on it. So fight fire with fire and do something like
.catalyst-widget-area a, .catalyst-widget-area a:visited,
.catalyst-widget-area a:hover {
color: #fff !important;
}
You can narrow the selector even more so you make sure it overrides it.
#mashmenu .catalyst-widget-area a, #mashmenu .catalyst-widget-area a:visited,
#mashmenu .catalyst-widget-area a:hover {
color: #fff !important;
}
And you can go on and on, making it more specific until it yields.
But here's something I've been wondering, how are you adding all these custom css files to a Wordpress theme? I say this, because there's is a right way, and many wrong ways to do it.
The right way is making a child theme of your current theme and work it from there. Child themes however, are not for entry-level modifications (though is way easier to override default styles from a child theme), in that case, there are plugins that help you override the css with your own custom css, one of the most popular is Jetpack.
In order to solve this issue in case anybody runs into a similar issue, I used the following:
.mashmenu .menu>li>a{color:#FFF !important;}
.mashmenu .columns .list a{color:#FFF !important;}
.mashmenu .menu .sub-channel li a{color:#FFF !important;}
.mashmenu .content-item .title a {color:#FFF !important;}
.mashmenu .page-item .title a {color:#FFF !important;}
.mashmenu .page-item a {color:#191970 !important;}
But when putting it at the bottom of my custom CSS, it didn't work; when I put it at the beginning of my custom CSS, it worked for some reason. I have no idea why this is the case, but this is what finally did the trick for me. Thank you for all who opined and helped me figure this out.
I have a row of divs with :hover and it is working when I hover over the images within the divs. However, it doesn't want to work for the text. I am on the newer side of html and css, so help appreciated. I must be missing something obvious?
The first one with the div.topIconsHover:hover CSS works. The other does not. I have tried applying the topIconsHover class to the div as well and it still doesn't work. So, I must be doing something wrong with the HTML? But I'm just not sure what. Help appreciated! Thanks.
Note: I have the CSS in an external sheet.
div.topIconsHover:hover {
background-color:#555555;
}
<div class="topIcons topIconsHover">
<img src="tools16lg.png" />
</div>
div.topTextHover:hover {
background-color:#555555;
color:#ffffff
}
<div id="topBrowse" class="topTextHover">
Browse
</div>
The color attribute is working only with text elements, not divs. So you should apply the class tag to your href tag like this :
<style type="text/css">
.topTextHover:hover {
background-color:#555555;
color:#ffffff
}
</style>
<div id="topBrowse">
Browse
</div>
EDIT :
If you're looking to define a base class for the link itself, and a HOVER state, do it like this :
<style type="text/css">
.topTextHover {
background-color: transparent;
color: #0000ff;
}
.topTextHover:hover {
background-color: #555555;
color: #ffffff;
}
</style>
<div id="topBrowse">
Browse
</div>
Good luck
You applied style to the ":hover text" but not for links. This should do the trick (not tested):
div.topIconsHover:hover {
background-color:#555555;
}
<div class="topIcons topIconsHover">
<img src="tools16lg.png" />
</div>
div.topTextHover:hover, div.topTextHover:hover a {
background-color:#555555;
color:#ffffff
}
<div id="topBrowse" class="topTextHover">
Browse
</div>
Anchor tags have a default text colour which gets priority (usually blue). What you need is to define this explicitly:
div.topIconsHover:hover {
background-color: #555555;
}
div.topTextHover:hover {
background-color: #555555;
}
div.topTextHover:hover a {
color: #ffffff
}
There are two really simple ways to resolve this issue.
First if you don't have any height/width requirements on the anchor tag (<a href=''></a>) being inside the div do the following:
.topTextHover a:hover{
background-color:#555555;
color:#ffffff
}
<div id="topBrowse" class="topTextHover">
Browse
</div>
If you do have spacial requirements for the text inside the div (i.e. you want the text to be vertically-aligned to the center and horizontally centered) then I would do the following note* this is backwards compatible but is really only compliant with CSS3
#BrowseLink:hover {
background-color:#555555;
color:#ffffff
}
<a id="BrowseLink" href="browse.html">
<div id="topBrowse" class="topTextHover">
Browse
</div>
</a>
Also of note IE6 doesn't like the pseudo-class hover on anything other than an anchor tag and therefor will not work properly. This may be applicable in other browsers as well but the main one that I know that has issues is IE6 of the browsers that are typically seen on a website.