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.
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;
}
Hi I am using a child component which is used globally in my app. So now i want to change few CSS properties for this child component only when it is specific to my requirement. I want to apply different properties for description and end class here. How can achieve this using SCSS and is it possible we can acheive it without important tag ?
*****HTML*******
<my-parent class="parent">
//I have added myflag to identify this has to apply only in case of my scenario
<global-child [class.myFlag]="myFlag===true">
<div class="child">
<div class="description">test</div>
<div class="end">end</div>
</div>
</global-child>
</my-parent>
This is how i tried to apply my css, it is picking up height but not color for description
*****SCSS******
global-child.myflag{
height: 100px !important
&.description{
color: blue !important
}
}
Edit 1: Kenny's answer looks good, but it still didn't work for me. The reason i am thinking is below. If that is correct how can achieve this in my scenario.
"I am adding the new CSS in my-parent.scss. And global child component has its styles in global-child component.scss. I believe my new SCSS code(which is parent) is loading before globalchild. Would that be a reason it is not reflecting on the page? "
Edit 2:
Updated few changes in HTML above and below are my child and parent css
****global child css****
.child {
display: flex;
flex-direction: row;
&-description {
width: 100%;
color: BLACK;
position: relative;
}
}
****Parent css*****
.parent{
global-child.myflag {
height: 100px;
.description {
color: blue;
}
}
}
This will work
global-child.myflag {
height: 100px;
.description {
color: blue;
}
}
Now when to use &
When you have class on same element
Like if you have element like
<global-child class="myflag description">
Then you should use & to apply properties to global-child element
But in your case .description is child of global-child element.
So this will work
global-child {
&.myflag {
// css properties
.description {
// css properties for `.description` those are child of `global-child.myflag
}
}
.description {
// css properties for `.description` those are child of only `global-child
}
}
Kenny's answer's were right for applying the CSS styles, But the issue for me was due to style scopes in angular. Providing viewEncapsulation as NONE on my angular component resolved the issue for me.
I am setting the width on an image:
<img class="someImageClass" src="someImage.jpg">
I use the following css styles:
.someImageClass {
max-width: 30px;
}
But I also have a global css style for images as well:
img {
max-width: 100%;
}
The max-width in the someImageClass style is being overwritten by the one that is global and I don't understand why. If I apply the css class directly on the element, it should take precedence over any global style.
try
img.someImageClass {
max-width: 30px;
}
There must be another rule using img.className somewhere. But in normal cases you can calculate the specificity of CSS rules. How is explained here https://www.w3.org/wiki/Inheritance_and_cascade#Specificity
Are you aware of the term important ?
.someImageClass {
max-width: 30px !important;
}
I'm using carousel slider more than two times and its .item height is 100%. I had to adjust the main slider on specific height, so i added a class .custom-slider in header tag put the style with !important tag, because there was already 100% height .
.custom-slider {
height: 645px !important;
}
Its adjusted and working fine. Now I have to adjust the on different resolution, so i have to reduce the height 645px to 496px, but due to !important property new added height does not working.
I'm trying following style on 1024 reslution, but its not working.
.custom-slider {
height: 496px !important;
}
This accepted answer is well explained, but i didn't resolve my issue, can any guide me regarding this. I would like to appreciate.
Change the style to max-height and remove the important!
.custom-slider {
max-height: 645px;
}
You could also make the selector more specific by adding the tag or a parents id/class. This would give the style a higher priority.
body div.custom-slider {
max-height: 645px;
}
If your trying to do this within the same resolution ( without using media queries ) you should be able to add a second class and give that a defined height as well - it should overwrite the first one. For example:
<div class="custom-slider secondary-height"></div>
.custom-slider.secondary-height {
height: 496px !important;
}
please check this: http://codepen.io/anon/pen/LGmrwZ
when you define a media query, it will catach the relevant one.
if you go from bottom up, only the relevant !important will catch.
and since they have same "cascading juice" the winner will be:
the one that have the appropriate media trageting and the one that comes last, so combining them will solve the issue.
scss example
.custom-slider{
width:100px;
border:1px solid red;
#media (min-width:700px) {
height: 20px !important;
border:1px solid green;
}
#media (min-width:900px) {
height: 80px !important;
border:1px solid blue;
}
}
by the way, if your css is loaded after the slider's css, you do not need !important.
same goes if you add a parent container to your css.
I have a css file with this style:
.filefield-element .widget-edit {max-width: 70%;}
I wanted to increase the max-width without modifying that css file, so I created a custom css file with this style:
.filefield-element .widget-edit {max-width: 99%;}
In the "html/styles" pane, I see that the styles are listed in the correct order:
.filefield-element .widget-edit {
max-width: 99%;
}
.filefield-element .widget-edit {
float: left;
max-width: 70%;
}
However, "max-width: 99%" is not overriding "max-width: 70%". It seems that the more restrictive value (70%) is used, even when the less-restrictive value (99%) comes first.
Is there a way to override a max-width value with a larger (less restrictive) value?
You can override (unset) max-width with
.foo{ max-width:none; }
... to clear any inherited max-width.
Try using !important, or selector with higher specificity.
Example:
max-width: none !important;
This is a specificity issue. Take a look at http://htmldog.com/guides/cssadvanced/specificity/.
Basically, you need to make one more specific than the other. Put the containing element before .filefield-element .widget-edit and it will be overridden
Use JavaScript to set max-width to none first, then reassign a new value.