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.
Related
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!
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:
Can a CSS class inherit one or more other classes?
(29 answers)
Closed 6 years ago.
Can I wrap a class (or id) around styling to apply it to elements only in that class?
For example, I have :
.title {
color: #000;
}
.block {
width: 100%;
}
.wrapper {
width: 90%;
}
I'd like to create a different design for these things, if they are in a specific class. I know You can do it like so:
.specific_class .title{
color: #fff;
}
But then I have to add it to each block. Can I do something like this?
.specific_class{
.title {
color: #fff;
}
.block {
width: 99%;
}
.wrapper {
width: 91%;
}
}
..just to assign different styles to work, if elements are in a specific class.
(I know the last example doesn't actually work).
I have a lot of these little blocks, so one "wrapping" would work and look a lot better than copy/pasting .specific_class in front of each one.
I'd like to apologize, if such question exists. I just couldn't find the correct words and find the solution, but there probably is a question like mine.
It is not possible in regular CSS. However, you might be interested in SASS, a CSS preprocessor that allows you to write nested rules (amongst other things) and compile them down to regular CSS.
This question already has answers here:
Is there anything in the CSS spec that allows a percentage property to be relative to a specific element/property?
(1 answer)
Creating CSS Global Variables : Stylesheet theme management [duplicate]
(6 answers)
Closed 8 years ago.
How would I access previously defined styles in CSS (3) to be used in my calc()? I'd like to know how because then I can use something like width: calc(80% - calc(padding / 2)), but I'm not sure how to get padding directly within CSS.
#main {
padding: 10px;
/* This is how we might do it - remember, we want our width to be 100% - 20px. */
/* See this.padding? */
width: calc(80% - calc(this.padding * 2));
/* Of course, it could be something like self.padding: */
width: calc(80% - calc(self.padding * 2));
/* Or even just (and best of all): */
width: calc(80% + calc(padding * 2));
}
/* What would be even more awesome is if we could get properties from other styles: */
#demo1 {
font-family: Monaco;
}
#demo2 {
font-family: #demo1;
}
/* Of course, we can do this if #demo2 is inside of #demo1: */
#demo1 {
font-family: Monaco;
}
#demo2 {
font-family: inherit;
}
/* But we want to do this without having it use inherit. */
Any idea how to do any of these? I don't want to use SASS, or var because it's only supported in Firefox.
This question already has answers here:
Can a CSS class inherit one or more other classes?
(29 answers)
Closed 9 years ago.
This might be a noob question, but I'm trying to search by terms like "CSS add more propertiers to existent class"; "Add CSS properties to class"; etc and I can't find what I'm looking for.
Imagine I have this:
.ui-bar { color: red }
Now I want to extend this property, but continue with the same color red.
.ui-bar-margin { margin-top: 10px; }
How can I accomplish this? If you want, you can point me links or terms to search for.
Thanks!
You just do it like this... Here's a lot of examples.
.ui-bar {
color: red;
margin-top: 10px;
background: white;
width: 300px;
display: block;
text-align: left;
}