This question already has answers here:
How do you inspect CSS variables in the browser?
(2 answers)
Closed 1 year ago.
I am trying the following, in order to have the header's height subtracted from the element below it.
header {
height: var(--header-height);
--header-height: 150px;
}
main {
height: calc(100% - var(--header-height));
}
What am I doing wrong?
Why isn't it calculating the "150px" value inside the calc()?
I moved the declaration of the variable to this:
:root {
--header-height: 200px;
}
Now it works!
Related
This question already has answers here:
Unable to overwrite CSS variable with its own value
(2 answers)
CSS Variables - Swapping values?
(1 answer)
Can a recursive variable be expressed in css?
(2 answers)
Closed 2 years ago.
In CSS, can we we multiply a variable by some integer like the code below ?
:root {
--x: 1em;
}
.class2 {
--x: calc(2em * var(--x));
}
A quick check on the MDN docs unfortunately did not shine light on this. So unless you're willing to dive into the spec, here's a quick test:
:root {
--x: 4em;
}
.class2 {
--x: calc(0.5 * var(--x));
font-size: var(--x);
}
<div class="class2">
Test - doesn't work as intended
</div>
By the looks of it not only does the calculcation not work - which is unfortunate by itself - but it even seems to invalidate the custom property for .class2.
Just to make sure the formula/approach of using other variables to create computed variables in general is valid:
:root {
--x: 4em;
}
.class2 {
--y: calc(0.5 * var(--x));
font-size: var(--y);
}
<div class="class2">
Test - <strike>doesn't</strike> works as intended
</div>
This question already has answers here:
Alternate table row color using CSS?
(11 answers)
Closed 6 years ago.
is it possible to create a background with rows which are different colored?
Here's some Pseudo-Code to illustrate it:
body {
row-1 {
height: 250px;
background-color: red;
}
row-2 {
height: 250px;
background-color: yellow;
}
.
.
.
row-n {
height: 250px;
background-color: green;
}
}
Is it possible to do that in css only?
You can use gradient to achieve this. You can use a online css gradient generator. Here is an example.
EDIT: I think I misinterpreted your question. Are you just asking how to give different divs in your body different colors? either give them all distinctive classes so you can style each of them independently, or use :nth-child(x) where you replace x with the div number you want to style (e.g. if you want to style the second div, use :nth-child(2)
This question already has answers here:
Lighten parent's (unknown) background-color in child
(3 answers)
How to override a LESS mixin variable based on a parent's variable
(1 answer)
Closed 7 years ago.
Hi I'm new to using Less and trying to make the best of the features it offers. What I would like to do is the following:
say I have a few anchor elements in html
Blue link
Red link
Green link
and I have the following css
.gen-link-prop {
text-decoration: none;
padding: 10px 40px;
color: #fff;
display: inline-block;
margin: 0 5px;
}
#blue-link-color: #9999ff;
#red-link-color: #ff9999;
#green-link-color: #99ff99;
.blue-link {
.gen-link-prop;
background-color: #blue-link-color;
}
.red-link {
.gen-link-prop;
background-color: #red-link-color;
}
.green-link {
.gen-link-prop;
background-color: #green-link-color;
}
.blue-link:hover, .red-link:hover, .green-link:hover {
background-color: darken(#<-- reference to base color here--<, 20%);
}
I want to be able to apply an operation to a property value that is already applied to the element. Is this even possible? Or is it something simple that I missed somewhere. Help is greatly appreciated
This question already has answers here:
Can a CSS class inherit one or more other classes?
(29 answers)
Closed 7 years ago.
I would like to make one of my CSS property proportional to another, but none is parent of the other one. It would looks like this:
elem-to-look {
/**
* This value could not be explicit,
* And I want it to working even with default values.
*/
width: 50px;
}
elem-derivative {
/* I'm looking for something like this */
left: [elem-to-look: width] + 25px;
}
Is it even possible ? If no, what kind of solution would you advise me ?
Well, it is hard, but under some conditions you can do that.
If your body font-size is stable and you don't change it in parents of your elements, you can do the following:
body {
font-size: 20px;
}
elem-to-look {
width: 2.5em;
}
elem-derivative {
left: calc(2.5em + 25px);
}
If this satisfies you, that could work.
This question already has answers here:
What do commas mean in CSS selectors? [duplicate]
(4 answers)
Closed 7 years ago.
What does this type of CSS definition mean? Note the first two classes are separated without comma but the last two are separated with comma.
.Container .layout, .groupContainer
{
width: 100%;
}
The comma separates selectors allowing one group of CSS styles to apply to multiple different groups. In your posted CSS:
.Container .layout,
.groupContainer {
width: 100%;
}
width: 100% will be applied to elements of class layout within elements of class Container, and to elements with the groupContainer class.
References:
CSS: 'Groups of Selectors'.
It is shortcut of
.groupContainer
{
width: 100%;
}
.Container .layout
{
width: 100%;
}
You should use it to group your CSS
As explained above, it helps group single CSS declarations across multiple selectors, and can help save file size (which could come in very handy as your CSS file gets larger!) and make things a bit clearer to read.
For example, you could have multiple selectors with the same declarations:
.div1 {
color: red;
}
.div2 {
color: red;
}
.div3 {
color: white;
}
.div4 {
color: white;
}
And you can shorten this by using:
.div1,.div2 {
color: red;
}
.div3,div4 {
color: white;
}
The comma is used for grouping, when the same rule applies for several selectors. Each selector is completely independent of the others.
The space is used for select any .layout that are inside .container, even if there are other elements between them.
For your question, the answer is:
you grouping .layout which is inside the .container class and .groupContainer for both the width value is 100%.