Consider the following scss:
.link {
....
span {
....
&:after {
....
.link.active & {
background-color: red;
}
.link:hover & {
background-color: red;
}
I want to change the background-color for the span :after pseudo-element when link is either being hovered or has the .active class.
What I've tried ( the code posted above ) doesnt seem to work.
Is there anything I'm missing ?
you should try it like this scheme :
.link {
span {
&:after {
...
}
}
&.active,
&:hover {
span:after {
background-color: red;
}
}
}
Working example : http://jsfiddle.net/92gqap5y/
This question seems to be asked often, as mentioned in this thread.
They increase the size of the link element to be as large as the span. Though I would recommend moving the :hover selector and .active class to the span element directly.
Related
I have a root element div.container at my page, there is div.block.scarlet inside with red color for text.
But we also have body is a parent for div.container element. And when body has class .landing I need to make pink color instead of red.
I don't understand how write it correctly. Help with a syntax please!
/* how I do it now */
.container {
.block {
&.scarlet {
color: red;
}
}
}
body.landing .container {
.block {
&.scarlet {
color: pink;
}
}
}
Tooooo much extra copy-paste code! Is it possible to write in one line? Maybe a trick or smth like sass &. What I want:
.container {
.block {
&.scarlet {
color: red;
#if(body.landing || container.landing) { color: pink }
}
}
}
This is short rule that recolor my text if the root nesting element changed.
You need to use parent selector reference to construct complete selector from current context:
.container {
.block {
&.scarlet {
color: red;
body.landing & {
color: pink;
}
}
}
}
I am using Wordpress and have the following code to style my menu items
css (the attributes I'm looking to change)
.main-nav li a {
color: #222;
}
.main-nav li a:after {
background-color: #d11e5d;
}
I have applied a custom class .btn-contact on one of the buttons so I can override its color and other attributes but I can't seem to target it. (using .btn-contact { color: red; } or .btn-contact { color: red !important; } doesn't work )
the output
Just add
.btn-contact {
color: red !important;
}
The !important should override every other value for the same property.
I don't know what the :after element is there for, but you need add the content property inside the rule, otherwise it will not render. You can also use en empty string like content: "".
In LESS, you can reference a child selector as follows:
<div class="button">
<div class="button-text"> Text </div>
</div>
.button {
&-text {
color:red;
}
}
This will output:
.button .button-text { color:red; }
This is neat and ideal, however, when using a hover, is there a way to maintain the same / similar syntax for the child element? Currently, this wouldn't naturally work:
.button {
&:hover {
&-text {
color:red;
}
}
}
This won't work and as expected, outputs something along the lines of
.button:hover .hover-text { }
Is there a way to get the expected hover result without defining the full class name, in this instance ".button-text"?
Any help would be greatly appreciated.
Because the parents selector & represents all parent selectors (not just the nearest ancestor), nesting under hover, will always include the :hover text.
This rule:
.button {
&:hover &-text {
color:red;
}
}
Will provide the result (lessismore playgroud):
.button:hover .button-text {
color: red;
}
My css is structured in components, each component is stand-alone.
example:
.menu {
background: black;
}
The framework I'm using sometimes adds a class to the body-tag. For example for logged in users it would look like this:
<body class="loggedIn">
<div class="menu"</div>
</body
I would like to keep the css structured inside each component. Is it possible to add a selector in less that is added before the parent? Something like:
.menu{
%loggedIn{
color: red
}
}
should give loggedIn users a red menu.
Unless I am completely missunderstanding you, and there is a possibility, then the ampersand-parent-selector is exactly what you need!
.menu{
.loggedIn & {
color: red
}
}
Should result in
.loggedIn .menu {
color: red
}
You can reference the parent selector using &: http://lesscss.org/features/#parent-selectors-feature
LESS
.menu {
background: black;
.loggedIn & {
color: red
}
}
Will compile to CSS
.menu {
background: black;
}
.loggedIn .menu {
color: red
}
I am currently using sass to help structure my CSS. A trivial given below.
.container {
.list {
.selected {
background-image : url('highlighted.png');
}
}
}
However I am also using modernizr (http://modernizr.com/docs/) and want to utilise CSS3 where possible. In this example I want to test for availability of border-radius , and use border-radius rather than a background image. Therefore I need to check for the presence of borderradius class on the html element. Is it possible to achieve this using some sort of look behind? Or do I have to repeat the code again with the .borderradius class, the end result being the following :
.container {
.list {
.selected {
background-image : url('highlighted.png');
}
}
}
.borderradius .container {
.list {
.selected {
background : yellow;
border-radius : 10px;
}
}
}
To me this looks messy and difficult to maintain in a large project. Does anyone have a more elegant ways of achieving this?
You can reference parent selectors using the ampersand (&), like this:
.container {
.list {
.selected {
background-image : url('highlighted.png');
.borderradius & {
background : yellow;
border-radius : 10px;
}
}
}
}
Which will compile to:
.container .list .selected {
background-image : url('highlighted.png');
}
.borderradius .container .list .selected {
background : yellow;
border-radius : 10px;
}
Check out this article, or this one for a more in-depth explanation of how useful this can be:
...you can place a trailing ampersand (&) character at the end of your selector declaration in place of the repeating selector, and sit back and enjoy the awesomeness of Sass