Yes it is possible, but not this way. You can introduce a variable:
CSS:
:root {
--onebg: url(image);
}
.one {
background: var(--onebg);
}
.two {
background: <someOtherValue>;
}
.three {
background: var(--onebg);
}
HTML:
<div class="one">
<div class="two">
<div class="three">
...
</div>
</div>
</div>
This way you can make three inherit one‘s background and you can change the background of both by altering the variable’s value.
Make the size to be 0
.one {
background: url(https://picsum.photos/id/1/200/300);
}
.two {
background: inherit;
background-size: 0 0;
}
.three {
background: inherit;
background-size: initial;/* update the size here like you want */
}
div {
padding: 50px;
height: 50px;
border:1px solid red;
}<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>Is there any way that i could have an element pass on a style but not to use it itself?
Example:
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
.one {
background: url(image);
}
.two {
background: inherit;
!!! I want it to be passed down but not displayed here
}
.three {
background: inherit;
}
seems a bit weird you would want this. What is the effect you are after?
There is no such
Please don’t ask
Better to just use an additional class on one and three.
This wouldnt be inheriting though would it? Its the same as just setting the background again in .three right?
Yes, but this way you can change the background of both by just setting a value for
This works for some cases, but it doesn’t directly answer the question. The background example may not be inclusive of the actual use case.
@isherwood The background example may not be inclusive of the actual use case –> we have no information about the background use so this is answering the question as stated since the second element is showing nothing like expected