Is possible in LESS make an element inherit only one or more specific properties?
For example (in a stylesheet.less provided from another source so i cannot modify it):
.divheader{
height:50px;
color: red;
line-height: 1.5;
}
In my stylesheet.less:
.mydivheader{
.divheader;
color: black;
}
In this case it would inherit all the properties not overwritten by my class, but i would like to do something like this:
.mydivheader{
.divheader.height; //invented syntax
color: black;
}
so i only inherit the height property of the divheader class...
How can a do something like this?
Related
I'm learning CSS and I have the result I want but only if I use the ! important; specification. I don't understand why I can't override a property inheriting one class and overriding a property.
form button.minor-action,
#profile-left a.action,
.minor-action {
display: inline-block;
background: #lightBlue;
color: white;
padding: 0 1.2em;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
text-decoration: none;
text-align: center;
font-weight: bold;
border: none;
height: 25px;
margin-top:1.0em;
line-height:25px;
white-space: nowrap;
&:visited {
color: white;
}
&:hover, &:active, &:focus {
background-color: darken(#lightBlue, 10%);
text-decoration: none;
}
&.call-to-action {
background-color: #pink;
&:hover, &:active, &:focus {
background-color: darken(#pink, 10%);
text-decoration: none;
}
}
}
.extra-questions {
margin-top: 0em !important;
}
I thought that if I use the above style for a button:
<button id="add_question" class="extra-questions minor-action">{% trans "Lägg till ny" %}</button>
then I wouldn't have to use the ! important; statement and the override would work without it, but it doesn't. What am I missing? can you please help me understand why it doesn't work without the ! important statement, or show me a way do to it without ! important; ?
Its is not entirely correct that it isnt overridden because its set in the class above, in this instance it isnt due to the order of your LESS - it isnt being overridden because you have listed your classes in the wrong order- instead of
extra-questions minor-action
You need to do
minor-action extra-questions
When denoting classes, if they share values for the same property settings- those values for the last class applied will take precedence.
Alternatively, you can add more specificity to your classes, in your LESS, nest extra-questions within minor-action and prefix with &. This will mean the order of classes in your HTML does not matter, the combination does. The output CSS will be:
.minor-action.extra-questions
Also, as I am sure you are aware, using !important should be avoided
Your example works without !important - http://jsfiddle.net/sgguap7v/
It does not work !important without that case -
1. The rule is to follow the class - .extra-questions {} .minor-action {}
2. The rule has a higher weight - button.minor-action {} It has a greater weight than .minor-action {}
The css rule are applied depending on the order you call them, and the more specific they are.
if you have 2 rules defining the margin-top The browser then have to decide which one to apply. To do that it read your css file from top to bottom and calculate the priority of each rules based on the following.
Priority 1: #id (Id are unique selector so very important)
Priority 2: .class (Then the class they are less important than ID but still )
Priority 3: element (Finally generic style that is overridden most of the time, this is your default style)
Each time you add a nested selector it add to the priority as well so:
body.class is more important than .class and body #id is more important than body.class etc...
Finally if the rules ends up with the same priority, the last one is apply.
setting the !important flag in your code is a way to artificially boost the priority to a particular rule. But if you end up having the same rule with !important then the priority rules above will apply.
Override Will Work if You Do
.minor-action{
margin-top: 0em;
}
You didn't apply any styles to .extra-questions but to .minor-action. its true you apply to a same element. but cascade just work like that.
This will help: How to override the properties of a CSS class using another CSS class
And This: http://www.w3.org/TR/CSS2/cascade.html#cascade
Because its already set in the class above .minor-action, if it's set it doesn't override unless you use !important
Your first selector is more specific, it applies to elements that are children of a form, and it just overrides the most general (the second one) which applies to any of your .yourclass regardless of its position in the document hierarchy. you can get rid of the important by selecting form .yourclass instead.
How to get LESS inheritable property value
ex:
.btn {
color: #000;
&:after {
color: darken(inherit, 15%);
}
}
The Less compiler compiles Less code into static CSS code and does not compute any property value. The Browser use the static CSS code to compute the value for the CSS properties.
The inherit property value is a reference to the computed value of the same property of its parent. At (Less) compile time this reference, and even the computed value of the parent do not exist. The darken() function is a built in of Less and run at compile time. So the darken() function can not have inherit as input value (a color value is required).
In the comments #seven-phases-max tells you to use variables, than your code should look something like that shown below:
#buttoncolor: #000;
.btn {
color: #buttoncolor;
&:after {
color: darken(#buttoncolor, 15%);
}
}
Notice that the use of the inherit property value it self is not forbidden in Less. For instance the following Less code will compile in valid and working CSS code:
a {
color: red;
&:hover{
color: inherit;
}
}
For the same reasons one could expect that you should be allowed to use the inherit property value in CSS(3) functions, such as width: calc(inherit - 2em); Also that is not possible although for different reasons, see CSS calc with inherit
If I would like to format an element that has a given class, sometimes (very rare) I use:
.beigeButton[class~="enabledButton"] {
}
What if I want to give properties to an element only when it does NOT contain the given string?
This does not work:
.beigeButton[class!="enabledButton"] {
}
How can I do that?
Use :not:
.beigeButton:not(.enabledButton)
In general you would style the basic button and overwrite the style with additional classes, somehow like this:
.beigeButton {
background-color: beige;
cursor: pointer;
}
.beigeButton.disabled {
background-color: grey;
cursor: not-allowed;
}
.beigeButton.enabled {
background-color: green; //or just keep the basic color
}
you could also define a more general 'disabled class' which can be applied to any other Element this way:
.disabled {
background-color: red;
pointer: not-allowed;
}
A button with the class 'disabled' will get a grey background, though the rule .beigeButton.disabled is more specific as the general .disabled rule.
Any other element (or if the more specific rule doesn't exist or apply) will get a red background-color.
edit:
To answer your initial question, you can style the other way round too, like marcinjuraszek already described:
.beigeButton:not(.enabled) {
background-color: grey;
cursor: not-allowed;
}
Note: check browser compatibilty here
Hope this helps :)
I've tried to find the answer, and can't seem to do so, which is leading me to believe that it isn't possible. With my minimal knowledge of how CSS works, I also don't think it would be possible, but I just want to ask before I start working around a problem that may or may not exist.
Basically what I'm trying to do is use a previously defined attribute in a new class in my CSS stylesheet. For instance, say I had a couple of classes that just held background or font colors, like this:
.black { background-color: #000000; color: #000000; }
.white { background-color: #FFFFFF; color: #FFFFFF; }
Now if I was defining a new class (or using any selector for that matter), would it be possible to use the value of an attribute from an already existing class? Here is what my idea would look like:
.newClass {
width: 100%;
height: 100%;
background-color: .black; /* this would just get the background-color attribute from the .black class definition */
}
background-color: .black; is basically just a placeholder for "get the background-color attribute from the .black class definition". Is that possible using purely CSS? I'm aware of a ton of alternatives with PHP/JS, but I'd like to know if CSS can tackle this by itself. Thanks guys.
SASS is a thing to go. Your code will be like
#mixin black-theme {
.black { background-color: #000000; color: #000000; }
}
.newClass {
width: 100%;
height: 100%;
#include black-theme;
}
SASS
PHP compiler for SASS PHPSASS
There are javascript based solutions too like LESS but I generally don't recommend them as if Javascript load slow then presentation becomes jerky.
No, this is not currently possible in CSS. CSS does not have variables or the ability to reference values from previous rules. You would have to look for a CSS preprocessing language that gets processed into plain CSS before going onto the web site.
If you're willing to go the preprocessed way, you can look at SASS or LESS.
Yea possible using SASS or LESS css
#bgcolor : black;
.newClass {
width: 100%;
height: 100%;
background-color:#bgcolor;
}
I'm trying to update a website. There's a label element I want to style. It looks like:
#foo {
font-size: 9px;
}
<label id="foo"></label>
but it looks like a css definition for the "label" element is overriding the more specific style I'm setting. I'm seeing this in firebug
label {
font-size: 16px;
}
.foo {
font-size: 9px; /* strikethrough on my font-size declaration here */
}
so is there a way to override the default label font-size setting without modifying it for everything? (I thought my more specific definition would do that by default)
Thanks
You've mixed up the syntax for id with the one for class:
#foo { /* # = id, . = class */
font-size: 9px;
}
Keep in mind that ids are supposed to be unique for the entire document
or switch your label to using a class instead:
<label class="foo"></label>
You could always use the !important indicator to give precedence to the rule.
font-size: 9px !important;