Just wondering when you use multiple classes on the one element such as class="foo bar" and those classes are setup as below:
.foo {
margin-right: 10px;
}
.bar {
margin-right: 0px;
}
Which class will have specificity? Will the margin be 10px or 0px?
It works based on precedence within the CSS. Therefore the item to occur most recently will override any previous styles.
CASE 1
.foo { background : red; }
.bar { background : blue; }
class = 'foo bar' would be blue in this instance.
CASE 2
.bar { background : blue; }
.foo { background : red; }
class = 'foo bar' would be red in this instance.
Working Example
Also, if you wish to target the element who has only both classes, you can use this syntax:
<ul>
<li class="foo first">Something</li>
<li class="foo">Somthing else</li>
<li class="foo">Something more</li>
</ul>
.foo {
color: red;
}
.foo.first {
color: blue
}
A single class name carries the same weight. In such a scenario, the rule that is listed first will be overwritten by the second, and hence, the element will have margin-right: 0px;
Here is a simple example using color instead of margin, because it's easier to visualize. The value specified in bar will be chosen by the browser.
In addition, more "specific" class will override a more generic one:
HTML:
<div class="foo">
<div class="bar">Hello World!</div>
</div>
With the following CSS:
.foo .bar { margin-left:25px }
.bar { margin-left:0px }
Notice how the inner div still has 25px margin to the left?
Also, read up on "!important" argument after providing the value:
.bar { margin-left:0px!important }
Check out
Related
I have two situations:
<div class="parent">
<div class="content">TEXT</div>
</div>
or
<div class="content">TEXT</div>
I want to change text color if class parent is present or not.
I write this css but it doesn't work:
div:not(.parent) > .content{
color: blue;
}
How can I solve it?
It doesn't work because in the second example you have no div element wrapping the content so div:not(.parent) is not matched (.content is a direct child of the body element)
Either you write
:not(.parent) > .content {
color: blue;
}
(without defining the element) or just reverse your logic: give a basic style for .content in case there's no parent element and override the style if the .parent exists:
.content {
color: blue; /* no .parent */
}
.parent > .content{
color: inherit;
}
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;
}
here is a fiddle with the problem:
https://jsfiddle.net/c2exs2f7/3/
How does the second "blue" stay like the first instance (it should have color: white) without changing the HTML structure?
HTML
<div class="blue">
<div class="content">
<div class="label">blue</div>
<div class="yellow">
<div class="content">
<div class="label">yellow</div>
<div class="blue">
<div class="content">
<div class="label">blue</div>
</div>
</div>
</div>
</div>
</div>
</div>
SCSS
// Skip until...
div {
border-radius: .25em;
padding: .5em;
font-family: helvetica, sans-serif;
}
// ...here:
.blue {
background-color: hsl(220,100%,50%);
.content {
color: white;
}
}
.yellow {
background-color: hsl(60,100%,50%);
.content {
color: hsl(0,0%,10%);
}
}
EDIT #1
Thank you guys for these fast responses!
I am working on a grid system where I am able to nest different grid systems (with different CSS values).
The selectors .yellow .content and .blue .content have the same specificity (20 in this case), therefore the selector that appears later in the stylesheet will override the first one due to the cascading nature of a stylesheet. In this case, the selector .yellow .content is overriding .blue .content, which is why the nested .blue element is black.
One quick solution would be to select nested .blue element with the selector .blue .blue:
Updated Example
.blue,
.blue .blue {
background-color: hsl(220,100%,50%);
.content {
color: white;
}
}
An arguably better approach would be to only select direct .content children elements using the child selector, >:
Updated Example
.blue {
background-color: hsl(220,100%,50%);
> .content {
color: white;
}
}
.yellow {
background-color: hsl(60,100%,50%);
> .content {
color: hsl(0,0%,10%);
}
}
Based on your comments, the ordering/layering of the elements may vary. An alternative solution would be to set the color property on the .blue/.yellow element and then set the color property of the children elements to inherit:
Updated Example - this seems to work for all variants.
.blue {
background-color: hsl(220,100%,50%);
color: white;
.content {
color: inherit;
}
}
.yellow {
background-color: hsl(60,100%,50%);
color: hsl(0,0%,10%);
.content {
color: inherit;
}
}
See https://jsfiddle.net/c2exs2f7/4/
What I did was to enforce inheritance only for the child content classed DIV, not the entire descendance.
Applying the immediate children operator > in the SCSS makes the .content div to consider only its immediate parent color.
Go on and try nesting more DIVs, you will see that it works.
You can't. Not with inherent anyway. Because the second blue will inherent from the yellow. So if u want all blue always have white letters and yellow always black letters. Why not just put:
.blue { color: #fff; }
.yellow { color: hsl(0,0%,10%); }
And you won't need the ".content" wrapper.
I had this same issue where the HTML nesting varies and so it's not possible to make more specific selectors due to overwhelming complexity and non-DRY code.
Here's the solution I came to:
https://jsfiddle.net/cg0u8v1s/
Basically, a systematic approach to the class names is key so you can use a CSS attribute selector reliably (although I'd recommend a more unique naming convention than "color-" as it's too generic.).
Example:
.color-blue {
&,
[class*="color-"] &,
[class*="color-"] [class*="color-"] & {// Only needed if you want a 3rd level of nesting to work.
background-color: blue;
.content {
color: skyblue;
}
}
}
.color-yellow {
&,
[class*="color-"] &,
[class*="color-"] [class*="color-"] & {// Only needed if you want a 3rd level of nesting to work.
background-color: yellow;
.content {
color: brown;
}
}
}
This will output selectors that become more specific with nesting without the need for non-DRY code or having to use !important.
The CSS output will look like this:
.color-blue,
[class*="color-"] .color-blue,
[class*="color-"] [class*="color-"] .color-blue {
// code...
}
Is it possible, in Sass, to manipulate a value a given element already inherits?
I am aiming for something like this:
body
color: blue
.warning
color: red
strong
color: darken(inherit,20)
Inheritance
No. Sass doesn't 'know' what selector to inherit the color from. It would have to know that strong is a descendant of body. That seems like a reasonable enough assumption for you and I since strong is not allowed outside of the body, but that sort of assumption cannot be made about most selectors. Sass would also have to know that there are no cascades happening from other ancestor elements.
ul {
color: red;
}
ol {
color: blue;
}
li {
// which color do I inherit from ????
}
Well can I specify which selector I want to copy from?
Sass does not grant access to the values of any previously declared variables in any fashion, either. There is no way to specify "be darker than the body's color". CSS rules are not objects or mappings and are not accessible in any way. Your case may be simple, but consider a more complex case like this:
.foo {
background: mix(white, blue); // fallback for non-rgba browsers
background: rgba(blue, .5);
.baz & {
background: yellow;
}
#media (min-width 30em) {
background: orange;
}
#supports (flex-wrap: wrap) {
background: red;
}
}
.bar {
// access which background color from .foo ????
}
Well what can I do?
You'll either need to use variables or it has to be a feature of vanilla CSS to do what you want.
Old-Fashioned CSS
Some properties can give the illusion of being generated/inherited dynamically using stuff that's been supported by browsers for years:
ul.one {
background: white;
}
ul.two {
background: yellow;
}
ul {
background: rgba(0, 120, 255, .2);
padding: 1em;
}
<ul class="one">
<li><ul>
<li><ul>
<li>Foo</li>
</ul></li>
</ul></li>
</ul>
<ul class="two">
<li><ul>
<li><ul>
<li>Foo</li>
</ul></li>
</ul></li>
</ul>
CSS Variables
Generating CSS variables is about as close as you're going to get to being able to manipulate an inherited property. Browser support isn't quite there yet (check caniuse), but here's what that would look like:
Sass:
ul {
--list-color: orange;
--darker-color: darken(orange, 15%);
color: var(--list-color);
}
ol {
--list-color: green;
--darker-color: darken(green, 10%);
color: var(--list-color);
}
li {
background: var(--darker-color);
}
Output:
ul {
--list-color: orange;
--darker-color: #b37400;
color: var(--list-color);
}
ol {
--list-color: green;
--darker-color: #004d00;
color: var(--list-color);
}
li {
background: var(--darker-color);
}
<ul>
<li>Foo</li>
</ul>
<ol>
<li>Bar</li>
</ol>
If you're using a browser that supports CSS variables, the result should look like this:
I was looking for the same thing, and came across this. Your question was answered, but it didn't solve the problem.
Here's the solution: http://codepen.io/monsto/pen/tiokl
If your HTML was this:
<div class="main">
<header class="header">
<div class="warning">
<p><strong>Danger,</strong> Will Robinson!</p>
</div>
</header>
</div>
Then using SASS you could do this:
$bg: #f88;
#mixin colorize {
$bg: darken($bg,15%) !global; // !global flag required for 3.4 or later, remove if using 3.3 or older
background: $bg;
}
.warning {
background: $bg;
p {
#include colorize;
strong {
#include colorize;
}
}
}
SASS seems to have no idea of the results of it's output. Therefore, inherit means nothing to it. You're basically asking it to know what the output is before it's output.
It does however know it's variables as, by default, they're tightly scoped.
From the docs:
Variables are only available within the level of nested selectors where they’re defined. If they’re defined outside of any nested selectors, they’re available everywhere.
AND THEN variables in mixins:
The block of content passed to a mixin are evaluated in the scope where the block is defined, not in the scope of the mixin.
This allows the above mixin to take a known variable, defined in the parent level, and redefines it for the current level and available to it's children. It's like doing $x = $x + 1 inside a multi-nested loop
TBPH, this rather changes the way I think about SASS. It's clearly a lot more programmatic than I thought.
Given that an element cannot have multiple of the same properties that combine and the fact that inherit can't know what the current rendered state is, your options are to
1) Keep track of the past transforms yourself using SASS variables: Demo
.parent {
$firstTrans: translateX(50%);
transform: $firstTrans;
.child {
/* Old followed by new */
transform: $firstTrans rotate(10deg);
}
}
2) Apply the transform to a parent (perhaps adding another container if needed): Demo
3) Use Javascript to combine the current transform with the one you want to add (this is the only way you can make sure to remove the transform applied to the parent if that's desired): Demo
Note: This answer is from a merged post because of this meta post.
This answers addresses the darken function specifically: A possible alternative is using the CSS brightness() filter instead of SASS's (or LESS's) darken() function. You will basically need to wrap the color inside a span tag so the filter would not affect other elements.
Simple demo:
.red {color: red}
.blue {color: blue}
.green {color: green}
span {
display: inline-block;
padding: 1em;
}
.darken span {
-webkit-filter: brightness(0.4);
filter: brightness(0.4);
}
<span class="red">Red</span>
<span class="blue">Blue</span>
<span class="green">Green</span>
<div class="darken">
<span class="red">Red</span>
<span class="blue">Blue</span>
<span class="green">Green</span>
</div>
jsFiddle: https://jsfiddle.net/azizn/hhorhz9s/
You need to keep in mind browser compatibility, it should work for IE Edge, latest Firefox and Chrome. See caniuse or MDN for more information.
In the case of a background darken, you could use a pseudo selector with opacity or add a semi-transparent black PNG background-image.
Is it possible, in Sass, to manipulate a value a given element already inherits?
I am aiming for something like this:
body
color: blue
.warning
color: red
strong
color: darken(inherit,20)
Inheritance
No. Sass doesn't 'know' what selector to inherit the color from. It would have to know that strong is a descendant of body. That seems like a reasonable enough assumption for you and I since strong is not allowed outside of the body, but that sort of assumption cannot be made about most selectors. Sass would also have to know that there are no cascades happening from other ancestor elements.
ul {
color: red;
}
ol {
color: blue;
}
li {
// which color do I inherit from ????
}
Well can I specify which selector I want to copy from?
Sass does not grant access to the values of any previously declared variables in any fashion, either. There is no way to specify "be darker than the body's color". CSS rules are not objects or mappings and are not accessible in any way. Your case may be simple, but consider a more complex case like this:
.foo {
background: mix(white, blue); // fallback for non-rgba browsers
background: rgba(blue, .5);
.baz & {
background: yellow;
}
#media (min-width 30em) {
background: orange;
}
#supports (flex-wrap: wrap) {
background: red;
}
}
.bar {
// access which background color from .foo ????
}
Well what can I do?
You'll either need to use variables or it has to be a feature of vanilla CSS to do what you want.
Old-Fashioned CSS
Some properties can give the illusion of being generated/inherited dynamically using stuff that's been supported by browsers for years:
ul.one {
background: white;
}
ul.two {
background: yellow;
}
ul {
background: rgba(0, 120, 255, .2);
padding: 1em;
}
<ul class="one">
<li><ul>
<li><ul>
<li>Foo</li>
</ul></li>
</ul></li>
</ul>
<ul class="two">
<li><ul>
<li><ul>
<li>Foo</li>
</ul></li>
</ul></li>
</ul>
CSS Variables
Generating CSS variables is about as close as you're going to get to being able to manipulate an inherited property. Browser support isn't quite there yet (check caniuse), but here's what that would look like:
Sass:
ul {
--list-color: orange;
--darker-color: darken(orange, 15%);
color: var(--list-color);
}
ol {
--list-color: green;
--darker-color: darken(green, 10%);
color: var(--list-color);
}
li {
background: var(--darker-color);
}
Output:
ul {
--list-color: orange;
--darker-color: #b37400;
color: var(--list-color);
}
ol {
--list-color: green;
--darker-color: #004d00;
color: var(--list-color);
}
li {
background: var(--darker-color);
}
<ul>
<li>Foo</li>
</ul>
<ol>
<li>Bar</li>
</ol>
If you're using a browser that supports CSS variables, the result should look like this:
I was looking for the same thing, and came across this. Your question was answered, but it didn't solve the problem.
Here's the solution: http://codepen.io/monsto/pen/tiokl
If your HTML was this:
<div class="main">
<header class="header">
<div class="warning">
<p><strong>Danger,</strong> Will Robinson!</p>
</div>
</header>
</div>
Then using SASS you could do this:
$bg: #f88;
#mixin colorize {
$bg: darken($bg,15%) !global; // !global flag required for 3.4 or later, remove if using 3.3 or older
background: $bg;
}
.warning {
background: $bg;
p {
#include colorize;
strong {
#include colorize;
}
}
}
SASS seems to have no idea of the results of it's output. Therefore, inherit means nothing to it. You're basically asking it to know what the output is before it's output.
It does however know it's variables as, by default, they're tightly scoped.
From the docs:
Variables are only available within the level of nested selectors where they’re defined. If they’re defined outside of any nested selectors, they’re available everywhere.
AND THEN variables in mixins:
The block of content passed to a mixin are evaluated in the scope where the block is defined, not in the scope of the mixin.
This allows the above mixin to take a known variable, defined in the parent level, and redefines it for the current level and available to it's children. It's like doing $x = $x + 1 inside a multi-nested loop
TBPH, this rather changes the way I think about SASS. It's clearly a lot more programmatic than I thought.
Given that an element cannot have multiple of the same properties that combine and the fact that inherit can't know what the current rendered state is, your options are to
1) Keep track of the past transforms yourself using SASS variables: Demo
.parent {
$firstTrans: translateX(50%);
transform: $firstTrans;
.child {
/* Old followed by new */
transform: $firstTrans rotate(10deg);
}
}
2) Apply the transform to a parent (perhaps adding another container if needed): Demo
3) Use Javascript to combine the current transform with the one you want to add (this is the only way you can make sure to remove the transform applied to the parent if that's desired): Demo
Note: This answer is from a merged post because of this meta post.
This answers addresses the darken function specifically: A possible alternative is using the CSS brightness() filter instead of SASS's (or LESS's) darken() function. You will basically need to wrap the color inside a span tag so the filter would not affect other elements.
Simple demo:
.red {color: red}
.blue {color: blue}
.green {color: green}
span {
display: inline-block;
padding: 1em;
}
.darken span {
-webkit-filter: brightness(0.4);
filter: brightness(0.4);
}
<span class="red">Red</span>
<span class="blue">Blue</span>
<span class="green">Green</span>
<div class="darken">
<span class="red">Red</span>
<span class="blue">Blue</span>
<span class="green">Green</span>
</div>
jsFiddle: https://jsfiddle.net/azizn/hhorhz9s/
You need to keep in mind browser compatibility, it should work for IE Edge, latest Firefox and Chrome. See caniuse or MDN for more information.
In the case of a background darken, you could use a pseudo selector with opacity or add a semi-transparent black PNG background-image.