when I do this, it works:
.view-current-sales .col-first a {color:#66ff66;}
when I add the hover, it doesn't work anymore
.view-current-sales .col-first a:hover {color:#66ff66;}
any ideas?
I think you are confusing a few things with the a tag and its accompanied hover counterpart. Let's break it down really fast using a different example.
The HTML:
<div class="nohover3">
Test 3
</div>
The CSS:
.nohover3 a {
color:#66ff66;
}
.nohover3 a:hover {
color:blue;
}
Now, I am assuming you are enclosing these a tags in some sort of div or other containing tag to have it's own separate class. Now, this HTML renders one single a tag that is accompanied by two CSS elements. The first CSS element gives the a tag its starting color, meaning it automatically starts with that lime-green color you have provided me in the original question. The second element gives the hover a different color, in this case, the color goes from that lime-green to blue.
With that being said, let's look at your example but with a bit more cleaned up code:
The HTML
<div class="nohover2">
Test 2
</div>
The CSS:
.nohover2 a {
color:#66ff66;
}
.nohover2 a:hover {
color:#66ff66;
}
In this case, both the first and second element are producing the same color for the a tags. That means the color the a tag is to begin with (lime-green) is the same as the color when you hover over the a tag(also lime-green). Which means it stays the same color whether it is hovered or not.
To paint a clearer picture here is a JsFiddle to represent what I have just said:
DEMO
I apologize ahead of time for the poor class names, creating examples is not my strong suit at the moment.
CSS uses a point-scoring system in determining which conflicting styles to use. Elements are worth 1 point, classes are worth 10 points and IDs are worth 100 points.
Try using "Inspect Element" in your chrome browser or similar in other browser types, it will tell you if another style is scoring higher and thus its hover style is used instead.
If thats the case try replacing the class reference for a:hover to an id reference to obtain a higher score for the a:hover you wish to use.
A nice description can be found here Points in CSS specificity
If all else fails try tagging your hover style with "!important" to ensure the stype is used.
Related
I am looking after a portal on a low-code platform. I am trying to update the background-color for a box on our portal, however am really struggling to update this.
I have copied the selector and also included a screenshot from the console.
If someone could point me in the right direction I would really appreciate that.
div.ideas-list--cntr.ng-scope > div > div.panel.panel-default.ideas-list--panel > div > div.panel-body.ideas-list--content > ul > li:nth-child(1) > div > div.idea-details--cntr > div.ideas-categories--cntr > a
Thanks
Mike
I have tried updating the background color as follows and was expecting a white background for the box:
.ideas-list--panel .ideas-categories--cntr a {
background-color: white;
}
However, I am still seeing #33466C background color.
In order to override the backgorund color the new rule should have bigger specificity than the rule you're overriding, you can achieve this either by:
adding your overriding rule after the original CSS in HTML,
increasing the specificity of the selector with techniques like repeating a class, for example .ideas-list--panel.ideas-list--panel .ideas-categories--cntr a,
or ending the declaration with !important
These techniques are ordered starting from the ideal practice, so pick the one that is easiest for you.
It seems there is another part of the selector which you erased with red color in your screenshot – this makes it more specific than your selector, so your rule won't apply due to a lower css specifity.
Use the complete selector from your screenshot, then it should work.
I'm seeing this "div#container" syntax being used in CSS and I'm wondering how it works. Anybody has a resource for it?
As well as being a unique reference as mentioned above, IDs increase specificity (I highly recommend you read this article or one similar http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/, understanding specificity in css will make your life easier).
Ill try to explain with a short example - take the following:
div#item { background: blue}
<div id="item" class="item">Hello world</div>
This says make any divs with the ID 'container' blue, but if you then add the following styles after it in your stylesheet
#item {background: purple}
.item {background: green}
the assumption is that the container would be green because stylesheets are cascading and the class with green background comes last. However this isn't the case, an ID has greater precedence and will override a class even if the class comes later. Additionally the item would not be purple because you have added the div before the id earlier on. Having the div and the id increases the specificity further.
People often specify items in css like this: div#container to add extra importance to the style or to specifically state that only DIVS with the id container can be blue.
I would recommend not doing this it becomes harder to override and the style then be comes unusable if you want to make something else have the background blue. So for example the following would not make the paragraph blue because the style specifically states divs.
div#item {background: blue;}
<p id="item">Hello world</p>
If you wanted to override the div#item to be pink instead of blue you might have to do something like the following.
div#item.item {background: pink}
This doesn't seem that bad but when you start building complex websites this can make your css really clunky.
My advice is to make your css as re-usable as possible e.g. the following can be easily overwritten and reused on any tag.
.item { background: blue;}
Hope that helps! Seriously read up on css specificity, it will really help you out.
From the CSS standard itself, a chart of selector syntaxes.
The one you're looking for is near the end:
E#myid Matches any E element with ID equal to "myid".
In other words, that selector will match <div id="container">.
Of course, id values must be unique, so you shouldn't need to specify an element name. You could use *#container or just #container, and many people do. Putting the element name in explicitly might be considered more self-documenting.
http://www.w3schools.com/css/css_selectors.asp
Try to look at this . This will teach you, how this works.
#abc {
text-align: center;
color: blue; }
now anywhere you use #abc text will be aligned center and text color will be blue.
You can also customize it as per your needs.
I'm trying to change the color of a text while the mouse is over another div.
It will be better explained with a jsFiddle **:
What I want to do (with CSS) it that when I move the mouse on the first cicle it changes the color of the text ( Result 1).
I have tried what I found searching previous questions on stackoverflow, by using something like that :
div.circleoff:hover ~.test {
color: #fff
}
If you're looking for a color change of nested elements (not a sibling element), use
#schema>div:hover span { color:white; }
This means that hovering over #schema's direct children(division elements) will cause all its nested spans become white.
jsfiddle
Eric Meyer has a few demos on his site that will help with exactly this. Look at the 'popup' section. it can easily be adjusted to fit this.
meyerweb | css/edge
You need to check the specificity of your css selectors. Also, you should not be using the sibling operator. I think this is what you are trying to do (replaced the last 2 rules with the code below).
#schema div.circleoff:hover + .circleoff2 .test,
#schema div.circleon:hover + .circleoff2 .texte {
color: #fff
}
When using multiple css files on the same page and they collide, how do i know which one is going to be used? For example, if one says blue body background and the other one says red.
Quick Answer:
If both pieces of CSS have the same specificity (for example, they're both body{), then whichever gets called LAST will override the previous one.
BUT, if something has higher specificity (a more specific selector), it will be used regardless of the order.
Example 1:
<div class="container">
<div class="name">Dave</div>
</div>
<style>
.name { color: blue; }
.name { color: red; }
</style>
The above example will make the color red. Both selectors are the same, and therefore also have the same specificity. And because CSS reads top-to-bottom, we first tell it to be blue, but then we override that by telling it "nevermind, make it red".
Example 2:
<div class="container">
<div class="name">Dave</div>
</div>
<style>
#container .name { background-color: blue; }
.name { background-color: red; }
</style>
The above example will make the background color blue, even though blue was first because the selector is more "specific".
Exception (the use of !important):
The inclusion of !important will override both specificity and order, but in my opinion, should only be used if you're trying to mess with a third party code in which you don't have access to change it any other way.
External CSS:
Overwrite rules work the same on external CSS files. Just imagine putting them first-to-last, top-to-bottom. The selectors called in the first file(s) will get overwritten by same-specificity-selectors in any subsequent files. But specificity will still trump order within the same file or in multiple files.
How to test:
In Chrome, Firefox, and modern versions of IE (probably Safari too), you can right click on something and click "Inspect Element". This will show you the HTML as well as any applied CSS. As you scroll down the CSS (usually on the right), you'll see things that are crossed out - that means they're either incorrect CSS or have been overwritten. To test, you can modify the CSS selectors (either in your own code or right there in the developer tools box) to make them more specific and see if that makes then un-crossed out...etc. Play around w/ that tool - it's VERY helpful.
Not sure how "specific" something is?
Try some of the many online CSS specificity tools:
https://polypane.app/css-specificity-calculator
https://specificity.keegan.st/
https://www.codecaptain.io/tools/css-specificity-calculator
<td class="blue">
Hi1
Hi2
Hi3
<div>Not Blue</div>
</td>
I want the class in the tag ("blue") to make Hi1,Hi2 and Hi3 blue.
So what should be the head of that class?
????
{
color:blue;
}
Using a descendant selector:
td.blue a {
color: blue;
}
Or if you only want it for immediate children, a child selector:
td.blue > a {
color: blue;
}
Reference material:
Selectors supported by most browsers: CSS 2.1
Newer selectors supported by some browsers and by various JavaScript libraries (for interacting with the DOM): CSS3 Selectors
Use the following. This means all a elements within any td element that has a class name of blue should be displayed in blue.
td.blue a {
color:blue;
}
However, you should note that semantically it is unwise to give your CSS classes style-specific names (like 'blue' or 'bold' or 'center') - if later you decided to change the colour to red, you would have to change all references to the blue class to red (potentially lots of work) or instead be left with really confusing class names that don't make sense.
Try naming the class after what the elements in question mean. So in this case, it might be td.links for example.
The CSS selector you need would reference both the blue class and the a tags beneath it.
.blue a {
color:blue;
}
Note that there is another syntax which you may also want to consider:
.blue>a {
color:blue;
}
note the > between .blue and a in this example. Both examples will work for your given HTML code, but this version more specific than the first, because it only affects <a> tags that are immediate children of blue. In other words, if you had an <a> tag inside the <div>, the first version would affect it, whereas this version wouldn't.
The downside is that IE6 doesn't support the > selector, so if you need to support IE6 users, you must use the first version. Fortunately, IE6 users are becoming fewer, but there are still a few of them out there.
One other thing: I'd also advise you to avoid using class names which refer to the actual colour. It's usually better to call it menulink, or something like that.
The reason for this? Imagine in the future you want to change your site a bit, freshen it up for a new version. Maybe new corporate colours afer a rebranding exersise. Whatever. You could do that without an change at all to your HTML code; just a CSS update:
.blue a {
color:red;
}
...but now your CSS doesn't make sense. If you'd called it menulink, you will always know what that class refers to, even if things change over time.
Try this.
td.blue a {
color: #0000FF;
}
This sets all a tags that are within a td tag with a class of blue.