Let's say we have the following CSS default rule X, declared in a WordPress child theme:
.btn { background: url("btn.jpg"); }
And this rule Y, declared in commercial parent WordPress theme:
.btn:hover { background: gray; }
Can I somehow tell the browser "ignore Y", so that nothing will happen when hovering the .btn element?
I think your only option is overriding the value of .btn:hover with the same value as .btn:
.btn:hover { background: url("btn.jpg"); }
.btn { background: red; }
.btn:hover { background: blue; }
/* ... */
.btn:hover { background: red; }
<div class="btn">Foo</div>
Related
How could I disable background-color in .button.search so it would fallback to $red value? I can't remove it; I can only overwrite it.
I have
.button {
background-color: {$red};
}
and
.button.search {
background-color: #000;
}
Don't need for any additional setting in search.
.button {
background-color: $red;
}
.button.search {
/* no background-color setting would fallback to $red*/
}
I would do it like this so you can extend the style from .search and it will always fallback with whatever you define and incase you want to have new value for the .active class you can just write background-color: green; after #extend .search;
.search {
background-color: red;
&.active {
#extend .search;
// background-color: green;
}
}
result will be like that
.search, .search.active {
background-color: red;
}
and if you will do that
.search {
background-color: red;
&.active {
#extend .search;
background-color: green;
}
}
and result will be like that
.search, .search.active {
background-color: red;
}
.search.active {
background-color: green;
}
I have a button class .btn and want to select only when it is with a link. What to add to a so I will get a.btn using SCSS and my code bellow?
SCSS:
.btn {
background: red;
a {
background: blue;
}
}
I want to get this in css:
.btn {
background: red;
}
a.btn {
background: blue;
}
Logical will be to do this a&. But it gives an error. a & and & a is giving a different result.
I know that this can be done with #at-root a#{&} but it is too ugly =) Is there a pretty way?
.btn {
background: red;
#at-root a#{&} {
background: blue;
}
}
This should work:
a {
&.btn {
background: blue;
}
}
.btn {
background: red;
}
You can't write that in a single block. In case if that's what you are trying to do.
Since .btn& is not a valid scss, it seems that #at-root a#{&} is your only option.
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 would like to do the following thing and I am wondering about the best way to go about.
I have a div which is each 20% of the container's width (5 blocks). I would like to give a different background color to each block but only using one CSS class. What is the best way to do it?
In the past, I used to create 5 different classes where only the bg color is different (as everything else is the same - 20% width and same height) but I think there is a better way to do it.
Is it possible to create a class in the CSS that handles the different bg colors for each container?
I am not very sure if it will work, but but can try this - have a same class for all the divs (as you are already having - say, the class is 'myDiv'). Then In css -
.myDiv:nth-child(1){
background-color: red;
}
.myDiv:nth-child(2){
background-color: blue;
}
.myDiv:nth-child(3){
background-color: yellow;
}
and so on..
Hope this helps :)
See http://www.w3.org/TR/css3-selectors/
in this link see css3 selector for li,div and ...
tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd) /* same */
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */
/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }
/* Alternate division enter code herecolours in CSS */
.mydiv:nth-child(1) { color: navy; }
.mydiv:nth-child(2) { color: green; }
.mydiv:nth-child(3) { color: maroon; }
.mydiv:nth-child(4) { color: purple; }
Play around with :nth-child or adjacent sibling selectors
Like so
.parent { width: 100%; }
.parent > div { width: 20%; float: left; }
.parent > div:nth-child(1) { background-color: black; }
.parent > div:nth-child(2) { background-color: blue; }
.parent > div:nth-child(3) { background-color: purple; }
.parent > div:nth-child(4) { background-color: orange; }
.parent > div:nth-child(5) { background-color: yellow; }
Example here
I was wondering how I could do something like the following with less css:
.btn {
color : black;
}
.btn:hover {
color : white;
}
.btn-foo {
.btn;
&:hover {
.btn:hover;
}
}
Of-course this is just an example, what need to point is if there is any way to extend the pseudo-class in order to avoid re-type the properties of :hover pseudo class everywhere I need them. I know I could create a mixin for that but I'm wondering if I could avoid it.
Thanks
UPDATE:
If you can't modify external files just redefine the selectors, and add missing states:
.btn {
// not adding anything here, won't affect existing style
&:hover {
// adding my own hover state for .btn
background: yellow;
...
}
}
// this will make your foo button appear as in external style
// and have the :hover state just as you defined it above
.btn-foo {
.btn;
}
Better now? :)
You don't need pseudo class. It will just work :)
Try this:
.btn {
background: yellow;
&:hover { // define hover state here
background: green;
}
}
button {
.btn;
}
Each <button class='btn'> element you create will inherit whatever was defined, including hover state. I think it's one of the main amazing features of LESS.
Hope this helps.
In Less 1.4.0(1.4.1?)
This:
.btn {
color : black;
}
.btn:hover {
color : white;
}
.btn-foo:extend(.btn all) {
}
Expands to this:
.btn,
.btn-foo {
color: black;
}
.btn:hover,
.btn-foo:hover {
color: white;
}
Be cautious though, this:
.btn {
color : black;
}
.btn:hover {
color : white;
}
.abc .btn {
margin: 2px;
}
.btn-foo:extend(.btn all) {
}
Will output this:
.btn {
color : black;
}
.btn:hover {
color : white;
}
.abc .btn {
margin: 2px;
}
.btn-foo:extend(.btn all) {
}
I have not looked into SASS more than half an hour, but I believe the later case is its default (or only) #extend behavior.