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
}
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.
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.
I'm attempting to override the link color in a certain area of an existing theme. The links are blue on a blue background by default. I'm not sure how this theme was approved to be offered to customers, but I'm going to attempt a simple fix by making links in this area white.
Here is the markup of the area of the page with the problem:
<div id="product_details_customtab2_tab">
example
</div>
Here was one of my unsuccessful fix attempts. I tried dozens of similar things. None worked.
#product_details_customtab2_tab {link{color: white !important}}
However, the links in the area I wished to fix did not change. (There is an admin area where I can add custom CSS, so I inserted this there. I can make other styles in other areas of the theme change, so the basic functionality works, but in this specific case I don't have the details right.)
What is wrong with my CSS? Have I given enough info in this question? Thanks
UPDATE: Here's the solution that worked:
#product_details_customtab2_tab a:link{color: white}
Thank you!!!
Your selector is wrong... there is no standalone CSS "link" selector, only the ":link" selector:
http://www.w3schools.com/cssref/sel_link.asp
Also, to use CSS inheritance, you only need to separate each part of the inheritance chain with a space, not wrap it in {}. i.e., if you want to change all links inside a div with id "foo" you would do this:
#foo a { ... } /* CORRECT */
and NOT This:
#foo { a { ... } } /* WRONG */
I assume that you either wanted to do this:
#product_details_customtab2_tab a{color: white !important}
or this:
#product_details_customtab2_tab a:link{color: white !important}
Your CSS is not valid. To make a selector inside another selector, you just need a space, like:
#product_details_customtab2_tab a { color: white; }
This will select all a elements inside that div.
This question already has answers here:
What does !important mean in CSS?
(5 answers)
Closed 3 years ago.
How is the CSS attribute property !important read?
Is it really important, exclamation mark important, ...?
Answer: From the answers below, it seems to be read simply important, or bang important.
an "!important" declaration (the delimiter token "!" and keyword
"important" follow the declaration) takes precedence over a normal
declaration.
http://www.w3.org/TR/CSS2/cascade.html#important-rules
Basically, where two style rules are the same... it gives the one marked !important greater importance and will apply those styles.
Example
div{
opacity:0 !important;
}
div.jason{
opacity:1;
}
The first rule would be applied even though the second rule is more specific (one element + one class as opposed to one element)
Note: IE6 ignores !important when you have two of the same property and one of them is important - it'll always apply the last declaration, whether or not it was marked important. **Added from #BoltClock's comment below.
Warning: !important is a hammer that should only be used when absolutely necessary. Almost always, it is better to use more specific selectors to achieve greater specificity and have your styles applied the way you want. !important can make it very difficult for future developers to find and make changes to your code.
One good use case: !important is great for user-defined styles, where a user wants to manipulate Web site pages in specific way in his browser (say make all the backgrounds black and the text yellow). Without having to worry about specificity, the user can add styles to certain elements (like body) and make the styles render.
Just "important" or "bang important." The ! is definitely not a negation in this case.
It's not a tag, it's a keyword.
body { color: red !important; } means, in English, "The text-color of red is important".
In terms of how CSS sees it, it applies more "weight" to that declaration, so it will be (far) more likely to be the applied style.
For an example of this, we can use
p { color: red; }
p.blue { color: blue; }
Now, any p with a class of blue will show blue text, all the others will show red text.
If we change it to this...
p { color: red !important; }
p.blue { color: blue; }
They will all show red text (even if they have a class of blue), as we've given more important to the first selector.
I like to think of it as "NOT important".
p {
color: red !important; /* The rest is NOT important for this CSS property. */
}
Meaning that everything else from that declaration and on is NOT important and should not be taken into account. The idea came from the usage of the "!" character as a boolean NOT in many programming languages. This way the !important makes sense as you read it.
I guess I read the ! as "very".
p { color: red !important }
I read as "Paragraphs have the color red, which is very important.