There is a property :
td { width : 200px; }
I want to write another css property , and the value of that property is the same as the previous one because I want to make them always the same value :
li.dropdown2 ul { width: 200px; }
So is it possible to reference the value of the property of the element td inside the second property ?
No, that's not possible using CSS.
However, tools like SCSS/SASS or LESS let you define variables which you can then use in both places.
You can use inherit:
li.dropdown2 ul { width: inherit; }
Which inherits the value from it's parent.
Related
I'm not sure how to explain this if not with examples.
Let's say I have this class
.padding1 {
padding-top: 100px;
}
applied to this element
<div class="myDiv padding1"></div>
whith its own rules defined later that will override the .padding1 rule. How to tell .myDiv to default to the last useful rule defined in .padding1?
.myDiv {
padding-top: 0;
}
.specialPage .myDiv {
padding-top: /* ignore my override */
}
I know I could do it the opposite way but I was wondering if this can be done in this way instead which can be useful in some complex designs.
UPDATE: I was of course asking to see if there's a rule I'm missing. I don't want to declare it again, nor use initial or inherit.
I just found out about this, there is a possible way to revert css styles using revert-layer.
⚠ Warning ⚠ : As of 2022, this keyword is experimental and not widely compatible. Currently only for Firefox and Firefox Android v97.
The revert-layer CSS keyword rolls back the value of a property in a cascade layer to the value of the property in a CSS rule matching the element in a previous cascade layer.
If there is no other cascade layer to revert to for the matching CSS rule, the property value rolls back to the computed value derived from the current layer. Furthermore, if there is no matching CSS rule in the current layer, the property value for the element rolls back to the style defined in a previous style origin.
Different from the revert keyword which reverts directly to the browser's defaults.
Additional ressources:
Creating layers with #layer
Style origin. Used to determine where to stop rolling back the cascade of styles
The following should work (Again, if your browser is compatible)
Elements with class 'padding1' will have a padding-top of 100px, unless they also have the class 'myDiv' in which case the padding will be set back to 0, but if said element is inside a parent with class 'specialPage', the padding will be reverted back to 100px.
#layer base {
.padding1 {
padding-top: 100px;
}
}
#layer special {
.myDiv {
padding-top: 0;
}
.specialPage .myDiv {
padding-top: revert-layer;
}
}
<div class="specialPage">
<div class="myDiv padding1">Inside specialPage original padding</div>
</div>
<div class="myDiv padding1">Outside specialPage no padding</div>
You can use padding-top: unset; which would completely neutralize all previous properties of the same name for the same class. But in order to "rewind" the property that came before padding-top: 0; you need to declare it again.
As I understand, You want style of .padding1 to be implemented for both div. Am I right?
This can be done like this
<style>
.padding1{
padding-top: 100px !important;
}
.myDiv {
padding-top: 0;
}
<style>
In HTML page
<div class="myDiv padding1"></div>
Now .myDiv will have padding-top:100px;
As .myDiv have own "padding-top:0" but it will show "padding-top:100px".
Hope it will solve you problem.
You could use initial to set it to its default value.
.myDiv {
padding-top: 0;
}
.padding1 {
padding-top: 100px;
}
.specialPage .myDiv {
padding-top: initial;
}
I have a html page
<smalltooltip id="menu-discussion" data-title-tooltip="Discussion"></smalltooltip>
<smalltooltip id="menu-settings" data-title-tooltip="Settings"></smalltooltip>
and css style
smalltooltip[data-title-tooltip]:after {
//css style
}
It's working, but how to select id "menu-discussion" like this:
#menu-discussion[data-title-tooltip]:after{
width: 70px;
}
but it's not working.
Is it just that you are selecting the 'data-title-tooltip' attribute instead of just 'data-title'?
#menu-discussion[data-title]:after {...}
or are you missing the content property for the after pseudo element?
#menu-discussion[data-title]:after {
content: '';
}
Use following style
smalltooltip[id="menu-discussion"][data-title-tooltip]:after {
width: 70px;
}
For reference - http://plnkr.co/edit/IJPhnQ6rq6Yi5I2yYJuu?p=preview
Edit
As per the edited question, there should be no issue with the style specified, however, I will recommend you to have style like above specifying the element, as unqualified attribute selectors are known to be slow
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
I look on Stack Overflow, and didn't find the solution, I know how to override style if style exists, just change its property. But now I have a strange style to override
Here is an example of what I have
First I have this one:
.slikezamenjanje img{
max-width: 100%;
max-height:150px;
padding-right:7px;
}
Now I need to override that style with just this one:
#zoomTarget .slikezamenjanje img {
max-width: 100%;
}
The problem is that first style appends second, but I don't want that, in this second style what I need is just one line, not to append from the first style?
Instead of override you can add another class to the element and then you have an extra abilities.
for example:
HTML
<div class="style1 style2"></div>
CSS
//only style for the first stylesheet
.style1 {
width: 100%;
}
//only style for second stylesheet
.style2 {
width: 50%;
}
//override all
.style1.style2 {
width: 70%;
}
You just have to reset the values you don't want to their defaults. No need to get into a mess by using !important.
#zoomTarget .slikezamenjanje img {
max-height: auto;
padding-right: 0px;
}
Hatting
I think the key datum you are missing is that CSS comes with default values. If you want to override a value, set it back to its default, which you can look up.
For example, all CSS height and width attributes default to auto.
I'm building form with images like a label...
I have:
DIV.icon-phone {
width: 22px
height: 22px
background: url('icon-set.png') no-repeat 22px 66px;
}
INPUT.pool-phone {
border:1px solid #666;
}
I would something like this:
if INPUT.pool-phone:focus change DIV.icon-phone background-position to: 44px 66px
Please help.
In order to alter some css property of an element when another element is modified, you need to have specific structures..
For your example, the input element must share the same immediate parent as the div and also be before it in the hierarchy.
In this case you can use the ~ General sibling combinator to target it
.pool-phone:focus ~ .icon-phone{
background-position:...
}
Demo at http://jsfiddle.net/gaby/fx5Uy/
otherwise you can use javascript and bind to the onfocus event..
you could write a javascript function to take care of that for you.
[the input button].onfocus = function changeBg () { [thediv].style.background="[whatever you want]" };
[the input button].onblur = function resetBg () { [thediv].style.background="[whatever you want]" };
Gaby posted a pure css version which is preferable (at least to me).