<style>
div {
color: red;
}
button {
color: yellow;
}
button:hover {
color: green;
}
button:disabled {
color: inherit; /* This sets the color to red but I want yellow */
/* could do this but it's less flexible */
color: yellow;
}
</style>
<div>
<button disabled>Yo</button>
</div>
Above explains the problem that I have. I've tried using inherit, unset, initial but none of them achieve what I want. "inherit" is close but is uses the parent color. I would like to revert the color back to the original cover when an item is disabled even when its hovered without having to explicitly declare the color in the disabled pseudoclass.
You can use CSS variable to define your colors and avoid the change inside the pseudo class:
:root {
--main-color: yellow;
}
div {
color: red;
}
button {
color: var(--main-color);
}
button:hover {
color: green;
}
button:disabled {
color: var(--main-color);
}
<div>
<button disabled>Yoooooo</button>
</div>
Or make some changes to your selectors. Avoid the hover to be applied to the disabled button and this one will by default keep the initial color:
div {
color: red;
}
button {
color: yellow;
}
button:not([disabled]):hover {
color: green;
}
<div>
<button disabled>Yoooooo</button>
</div>
<div>
<button >Yoooooo yooo</button>
</div>
Why not using this?
The :not() CSS pseudo-class represents elements that do not match a list of selectors.
button, button:disabled {
color: yellow;
}
button:not(:disabled):hover {
color: green;
}
Or
button {
color: yellow;
}
button:not(:disabled):hover {
color: green;
}
https://codepen.io/anon/pen/XZepyB
div {
color: red;
}
button,
button:disabled {
/* assign the default colors together */
color: yellow;
}
button:hover {
color: green;
}
button:disabled:hover {
/* then override the disable state separately as needed */
color: #cc00cc;
}
Not sure if I understand you correctly, but this basic CSS mechanism would be:
div {
color: red;
}
button, button:hover:disabled {
color: yellow;
}
button:hover {
color: green;
}
<div>
<button>Yo</button>
</div>
<div>
<button disabled>Yo</button>
</div>
<div>
<button disabled>Yo</button>
</div>
Just add ":disabled:hover" to the "button" selector and remove the ":disabled" one:
button,
button:hover:disabled {
color: yellow;
}
Related
Within a specific div, I want to make focused buttons to look exactly like non-focused buttons.
Is there a way I can express that in sass/scss?
Something similar to this:
.myDiv {
> button {
&:focus {
#extend &:not(&:focus)
}
}
}
Alternatively, can I disable all rules that are applied only because of the definition for pseudo-class :focus ?
You can simply overwrite the default styling by doing this below
.myDiv {
> button {
&:focus {
outline: none;
}
}
}
If you needed to use extend, you could do something like this
%no-focus {
outline: none;
}
.myDiv {
> button {
&:focus {
#extend %no-focus;
}
}
}
However, I advise you read this article from the a11y project - which explains why in terms of it's not good to un-style :focus'd elements in terms of accessibility.
You could use placeholder selectors. Something along the lines of this:
%button {
color: red;
}
button {
#extend %button;
&:focus {
color: green;
}
}
.myDiv {
> button:focus {
// Extend from %button again, thus overriding through specificity.
#extend %button;
}
}
Here, I explain simply. Please see the code below.
HTML:
<div class="mydiv">
<button>My Button</button>
</div>
SCSS:
* {
outline: none;
}
.mydiv {
button {
border: 1px solid #000;
&:focus {
border:1px solid #ccc;
}
}
}
:root {
--color: blue;
}
div {
--color: green;
color: var(--color)
}
#alert {
--color: red;
color: var(--color)
}
<p>What's my color?</p>
<div>and me?</div>
<div id='alert'>
What's my color too?
<p>color?</p>
</div>
In the above code, how can I access the global value of --color in div with id='alert'?
Or in other words is there any way in CSS to access the global variable like the :: (scope resolution operator) in c++??
You Can't do that with CSS.
If You'll repeat the declaration of the same variable, it'll use the locally declared variable.
See this-
:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }
<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id='alert'>
While I got red set directly on me!
<p>I’m red too, because of inheritance!</p>
</div>
Source: Example 5 CSSWG
This is a possibility
:root {
--color: blue;
}
div {
color: var(--color);
}
#alert {
color: var(--color);
}
<p>What's my color?</p>
<div style="--color:green">and me?</div>
<div id="alert" style="--color:red">
What's my color too?
<p>color?</p>
</div>
Or:
:root {
--color: blue;
}
div {
--color: green;
color: var(--color);
}
#alert {
--color: red;
color: var(--color);
}
<p>What's my color?</p>
<div>and me?</div>
<div id="alert">
What's my color too?
<p>color?</p>
</div>
CSS Custom variables are inheritable, that means when you define a variable in :root, it is applicable to all elements.
When you applied it to div it changed for all div and everything inside the div.
And because they have been inherited, their parent's/root's value can't be accessed.
Check out this pen for some trials.
One method hack to do is to make a copy of the variable and use it.
:root {
--color: blue;
--colorRoot: var(--color);
color: var(--color);
}
div {
--color: green;
color: var(--color);
}
#inside {
color: var(--colorRoot);
}
<div> I am inside a div.<br><span id="inside">I am inside</span></div>
I am ouuuuuutside
Pretty sure that's not you would like to do.
Yes yes, I had a hard time trying to define my question.
The general case is like this:
in sass/scss I have a button with some variants:
.button {
/* generic button styles here */
&__icon {
color: green;
}
}
And now I wish to use some hover styles on this, per variant. But because I use the &__* I can't seem to grasp how to do this without rewriting the parent class name.
.button {
/* generic button styles here */
&__icon {
color: green;
}
&:hover {
.button__icon {
color: red;
}
}
}
^^ this works but is pretty manual
Is there a way in sass that allows to access the parent class and get something like:
&:hover {
&__icon {
color:red;
}
}
But this time the &__icon should reference the parent.
The html to this would look somewhat like this:
<button type="button" class="button">
[name]
<span class="button__icon">+</span>
</button>
.button {
$root: &;
&__icon {
color: green;
}
&:hover #{$root}__icon {
color: red;
}
}
or
.button {
$root: &;
&__icon {
color: green;
#{$root}:hover & {
color: red;
}
}
}
I have a link which should display white for 'regular' and hover, and light blue for active.
But it shows purple for 'regular'. Why?
.button {
text-decoration:none;
color: red;
background: purple;
}
.button:hover {
color: white;
background: purple;
}
.button:active {
color: red;
background: purple;
}
.button:visited {
color: purple;
background: purple;
}
text
HTML:
text
CSS:
<style>
.button {
text-decoration:none;
color: red;
background: purple;
}
.button:hover {
color: white;
background: purple;
}
.button:active {
color: red;
background: purple;
}
.button:visited {
color: purple;
background: purple;
}
</style>
If .button is an <A> tag as your CSS suggests you might want to provide styling for the "visited" pseudo class.
See: http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:visited
Additional Information
The cascading nature of CSS means that the style's order does matter.
Once a URL has been visited, the ":visited" styles will apply.
When you hover over the link, those styles will apply as well.
The priority in which they apply will depend on the order they are in your style sheet.
Note: If you want ":hover" to be dominant (even after visited happens, it should be defined below :visited.
I'm curious as to why this doens't work? My guess is that whatever element your targeting you have to go through its parent. Am I right or is there a trick? (no jquery)
Checkout the fiddle: http://jsfiddle.net/eMw5C/
HTML
This doesn't work
Trigun
<h1>This Works</h1>
<div class="yes-working">
<img src="https://i158.photobucket.com/albums/t109/hp_arianepotter/trigun-1.png" />
Trigun
</div>
/* This doesn't work */
.not-working img { width: 10em; clear: both; }
.not-working img:hover a { color: red; }
.not-working a { color: black; }
.not-working a:hover { color: red; }
/* This works */
.yes-working img { width: 10em; clear: both; }
.yes-working:hover a { color: red; }
.yes-working a { color: black; }
.yes-working a:hover { color: red; }
In the non working example, the anchor tag is not child of the img tag.
.not-working img:hover a { color: red; }
Should be:
.not-working img:hover ~ a { color: red; }
Works here: http://jsfiddle.net/eMw5C/1/
you have invalid path selector on .not-working class.. try this :
.not-working img:hover ~ a { color: red; }
syntax (AFAIK) :
"~" mean select next object
">" mean select children object in one step level bellow
but I don't think you can re-select parent object
CMIIW
Because .not-working img:hover a means that your anchor tag <a> is inside the img tag which is not true. It is true in the second case and that's why it is working.
Its worked :
.not-working img { width: 10em; clear: both; }
.not-working:hover a { color: red; }
.not-working a { color: black; }
.not-working a:hover { color: red; }
http://jsfiddle.net/aldiunanto/eMw5C/2/