my css file has a property (see below) that applies to all images:
img{height:auto;max-width:100%;}
I have images in a particular div that I don't want to apply this to.
I can assign a new image class but the global one above still takes effect.
Is there a way to prevent the global img applying to images within this div?
Yes if you make more specific your rule then it be primordial like:
div.contenedor img {
height:10%;
max-width:50%;
}
Also set this after the other rule.
You need to change all the previous properties
You want to reset the properties to their defaults. height: auto is the default anyway, so the only one you need to get rid of is max-width, which you need to set to none.
div.auto-width img {
max-width: none;
}
Because this selector has greater specificity (0021 vs 0010) it overrides the original definition.
use the !important property on your new image class.
.auto-width {
max-width: none !important;
}
Also, CSS files are cascading so if you put your new image class after the standard image class, you will be able to override the max-width without the !important statement.
Related
This is the output of my html code
I want to make the size of mat-chip form field even as the above form-field.
This is location from where I used chips..I want to decrease the size of the chip mat-form.
You can override the styles from angular/material.
In this case, it is enough to simply add the same property in a style rule in your component's CSS file. Your component CSS has higher specificity than the mat-chip rules below.
The height of the chip is determined by the following rule:
.mat-standard-chip {
min-height: 32px;
}
So you could override this to make the chip smaller.
You may also want to modify the font-size with the following rule:
.mat-chip {
font-size: 14px;
}
from dev tools, try to get the right class attached with the element you wish to set the size for. Then using any preprocessor css, set the style for that element inside the component class the element is present.
I have a third party CSS file, need to delete, add, override some properties. Meanwhile want to delete some classes without changes in the original one.
e.g.
ThirdParty.css
.cal_navline div
{
position: absolute;
top: 2px;
white-space: nowrap;
}
Is it possible to delete this class without changes within the original css file? Is it possible that above class is not treated or ignored in our code?
You can use !important with a style to override a style.
You can use same class and style with !important which will override the styles.
In order to "delete" properties, you should use their default values.
You see, every property is always set, is just that they have default values.
For example, if you have an element with position: absolute; and you want to remove that, you would use position: static !important;, because the default value of position - that is, when is not set- is static.
The source about what I said about position is here: http://www.w3schools.com/cssref/pr_class_position.asp
Read the part that says:
Default value: static
Same way, every css property has a default value. If you force the default value, is like deleting that property.
(top,left,right,bottom have auto as their default value, some others by default inherit the values of their parents, those have an inherit value as default, etc)
Here is a list with default css values: http://www.w3.org/TR/CSS2/propidx.html
As the above answer, I would keep !important as the last option, if you want to override styles, you can use higher specificity rules like
.container_class .cal_navline div {
position: absolute;
top: 2px;
white-space: nowrap;
}
If still it is not specific, you can use !important to override the third party CSS.
Also, you can use JS in this case if you are open to use it.
For example, if we need to set a div's font-size to 22px, is there a possible way to let the descendants of this div still inherit from the font-size from body? (or any inheritable style, thanks to #Sourabh for pointing out background is not inherited).
I think a key point is that so that we can change the style of body or some parent and let it pass through, even though there is an intermediate change of style. So preferably, we won't do it by:
body, #foo * { font-size: 16px }
#foo { font-size: 22px }
This is related to the case as described in How to solve flicker on iPad when event delegation is used? , where the -webkit-tap-highlight-color need to be set for a div, but the descendants of this div will be best to inherit what is above this div (the parent of this div).
I can use JavaScript to put the style of this div in a temporary variable, and then change the div's style, and then change the style for just the immediately children of this div to the value of that temporary variable, but then whatever that is set for the style of body won't get inherited by those children or their descendants.
No. In the DOM, a descendant element will inherit any inheritable CSS of the parent(s). You can 'reset' it back to match the parent item by declaring it again, but you can't do exactly what you are asking which is only changing the BODY style declaration.
Off the top of my head, the one solution I can think of would be not rely on pure inheritance from the body element but instead create a class and use it on all elements where you want to control aspects from one declaration. That still may be tricky due to CSS specificity, though.
If I'm understanding your question correctly, you could use a > combinator like so:
Working Example
body, #foo { background: yellow }
#foo>* { background: blue }
or like so:
Working Example2
body {
background: yellow;
}
#foo {
background: blue;
}
#foo>* {
background: yellow;
}
W3C background-color Stats
Initial: transparent
Inherited: no
All elements are transparent regardless of their parent's background-color. But that color is transparent so parent's color is visible on the child. So basically, if you want them to inherit color, you can't (not with CSS at least) (there might be a trick that I am not aware of). You have to specify the color for every element if you don't want it to be transparent.
The answer is not quite.
You can reset a property to its initial values by using the initial css keyword, which is particularly useful for these user-agent set styles (like -webkit-tap-highlight-color)
See this jsFiddle.
Note however that this isn't the value that would be set by default if the parent didn't exist, but literally the browser's default setting. In particular, body level formatting is not taken into account.
I've also included the default keyword, which is effectively the same as not including any font-size specifier at all - it goes up the cascade chain to find one that has a font-size specified, in this case on the element-name selector.
Basically I have two external css in my page.
The first Main.css contains all style rules but I don't have access to it, and hence I cannot modify it. I have access to a second file Template.css , so I need to override the Main.css's values in template.css.
This is easy for which I have to change the value, but how do I remove a property entirely?
Like say a class .c1 has height: 40px;, how do I get rid of this height property?
You have to reset each individual property back to its default value. It's not great, but it's the only way, given the information you've given us.
In your example, you would do:
.c1 {
height: auto;
}
You should search for each property here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
For example, height:
Initial value : auto
Another example, max-height:
Initial value : none
In 2017, there is now another way, the unset keyword:
.c1 {
height: unset;
}
Some documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/unset
The unset CSS keyword is the combination of the initial and inherit
keywords. Like these two other CSS-wide keywords, it can be applied to
any CSS property, including the CSS shorthand all. This keyword resets
the property to its inherited value if it inherits from its parent or
to its initial value if not. In other words, it behaves like the
inherit keyword in the first case and like the initial keyword in the
second case.
Browser support is good: http://caniuse.com/css-unset-value
.c1 {
height: unset;
}
The unset value added in CSS3 also solves this problem and it's even more universal method than auto or initial because it sets to every CSS property its default value and additionally its default behawior relative to its parent.
Note that initial value breaks aforementioned behavior.
From MDN:
Like these two other CSS-wide keywords, it can be applied to any CSS property, including the CSS shorthand all. This keyword resets the property to its inherited value if it inherits from its parent or to its initial value if not.
like say a class .c1 has height:40px; how do I get rid of this height property?
Sadly, you can't. CSS doesn't have a "default" placeholder.
In that case, you would reset the property using
height: auto;
as #Ben correctly points out, in some cases, inherit is the correct way to go, for example when resetting the text colour of an a element (that property is inherited from the parent element):
a { color: inherit }
An initial keyword is being added in CSS3 to allow authors to explicitly specify this initial value.
To get rid of the fixed height property you can set it to the default value:
height: auto;
You need to provide a selector with higher specificity than the one in Main.css. With that selector, set the values of the properties you want to their default, e.g.
body .c1 {
height: auto;
}
There is no "default" value that will work for all properties, you need to look up what the default is for each one and use that.
I had an issue that even when I did overwrite "height" to "unset" or "initial", it behaved differently from when I removed the previous setting.
It turned out I needed to remove the min-height property too!
height: unset;
min-height: none
Edit: I tested on IE 7 and it doesn't recognize "unset", so "auto" works better".
Is there any way to apply a style that will effectively block the
application of any applied or inherited styles for that object and any
contained objects?
No. You'll have to override all other properties being set on it.
Write a style class i.e clearall override all the attributes that you need to what you want as the default vaules. i.e
.clearall {
display: block;
clear: both;
height: 1px;
margin: 0 0 0 0; ... }
Now, you can use that class to
<div class"clear">
<div class="awesome"> ..
</div>
</div>
<div class"clear">
<div class="woooow"> ..
</div>
</div>`
So now everytime that you need to reset the style, you can use that class
I would suggest to add at the end of your CSS code a complete reset code such as the one from Eric Meyer.
It should take care of erase most everything and and you can put your own code after that.
You can always can call !important on an element to override specificity inherits.
.wrapper p{color:red; background:blue;}
.wrapper div p{color:blue !important; background:none !important;}
Actually - no... But you can try to use jQuery for this purposes.
$('.class').removeClass().removeAttr('style');
It should remove all classes from matching elements and clear style attribute. Though, it's untested +)
If you want to do this for testing/debugging purposes, have a look at the Firefox Web Developer add-on. It has functions for removing CSS for whole pages or individual elements and their contained elements, or for altering CSS on the fly whilst viewing the page.
If you are looking for a good CSS reset for production use, have a look at Tripoli. This is a set of CSS styles that will reset the default rendering in each browser to the same common base, to use as a starting point for applying your own styles. There are many other CSS resets around but Tripoli is my personal favourite.
There‘s no one CSS property that turns off all other CSS properties. You’ll have to set each property to whatever value you want (for some CSS properties, e.g. font-family, there’s no “off” value — text has to be rendered in some font).
As for “that object and any contained objects” (emphasis mine), the * selector selects all elements. So, your CSS rule could look like this:
.turn-off-all-styles,
.turn-off-all-styles * {
/* Disable every CSS property here */
}
As others have mentioned, check out Eric Meyer’s CSS reset for a good example of setting all CSS properties to defaults. If you add !important after each value, that should stop other CSS rules from interfering with this style, e.g.
.turn-off-all-styles,
.turn-off-all-styles * {
margin: 0 !important;
...
}