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;
}
Related
I see some e.g. div/button style in Chrome console like this:
/* Chrome browser styles tab */
.ItemClass1-0-3-171.ItemClass2-0-3-173: {
background-color: "red"
}
How do I define a new style in CSS ignoring that class numbers? because it can be a different number for other div/button on the page..
/* CSS file */
.ItemClass1.ItemClass2 {
background-color: "blue"
}
You can use two attribute contains selectors for this.
[class*="ItemClass1"][class*="ItemClass2"] {
background-color: red;
}
<p class="ItemClass1-0-3-171 ItemClass2-0-3-173">foo</p>
But keep in mind that this will also select elements with the class fooItemClass2.
You can use an attribute selector with a starts-with value to pick up anything that starts with ItemClass.
Note: This solution assumes ItemClass is the first classname and doesn't account for whether the element has both classes. For these reasons Sven's answer might better suit your needs.
[class^='ItemClass'] {
background-color: blue;
padding: 4rem;
}
<div class="ItemClass1-0-3-171.ItemClass2-0-3-173"></div>
I came across this problem while handling a large project and felt that i should seek an opinion from the community here.
I have specified a css class 'header' in style1.css, i.e.
.header { color: red;}
In another file, I inadvertently, named a class 'header' again with this rule :
.header { background-color: yellow; }
When i refreshed the browser i noticed the red font and after examining the style inspector found the problem. I tried to avoid the problem by applying specificity, i.e. #some-div .header, but that didnt stop it from applying the red font. Of course i could simply solve the problem by renaming header to something else, but i'm curious how developers who handle large projects handle this. Thanks for your time.
Well, from your code, you specified values for different properties in the two declarations of the header class. The first declaration specifies a color property and the second specifies a background-color property. From all indications you're not really "overriding" anything since you didn't give conflicting values for one property so, CSS is simply giving the values of the first declaration of the header class to the second one because there's no difference. If you wanted to override it for the second you'd have to probably add a different identifier to the second declaration of the header class to point to a unique element and specify a different value for the color property. Hope this satisfied your curiosity.
Just add a different class to one of the cases. For example:
.header {
color: red;
}
.header.yellow-bg {
color: initial;
background-color: yellow;
}
<h3 class="header">Red header</h3>
<h3 class="header yellow-bg">Black/yellow header</h3>
The second declaration for color applies because it is more specific (2 classes > 1 class).
Don't use !important as another user suggested. Avoid it all costs. It's the easy way out for the moment, but once you start going down that road, you're going to end up with a stylesheet that's terrible to manage.
Set your styles for a specific base and use classes and more specific selectors as overrides. Remember that stylesheets cascade.
For example, say you have a typical header font color that should be your .header. If you have other one-off or unique headers that share same structure provide another class to that which makes sense to you.
So as an example:
Both headers have the .header styles but headers with the special class have blue text color which overrides red.
.header {
color: red;
width: 100%;
display: block;
background-color: #eee;
padding: 10px;
margin: 2px;
}
.header.special {
color: blue;
}
<div class="header">Regular Header</div>
<div class="special header">Special Header</div>
May not be the best wording for my question, here's what I'm trying to accomplish.
I'm using Angular2 app with bootstrap 3 styling, where we are using many components (directives in angular1.x). This also leads to us having components inside components.
On one of my pages, I have the bootstrap class .well, and then there's another component inside that one that also utilizes .well. So if you're familiar with bootstrap, a .well inside another .well yields quite a bit of padding.
So, I want to write a css selector where I remove the padding for the inner .well when it's inside another .well.
Here's what I've tried so far:
.well .well {
padding: 0;
}
div#doubled-up-well .well {
padding: 0;
}
div.well .well {
padding: 0;
}
div.well form.well {
padding: 0;
}
None of these seem to work, what am I doing wrong here?
Here's how it's structured to give a better idea:
<div class="well" id="doubled-up-well">
<my-custom-component>
<form class="well {some more angular classes here}"></form>
</my-custom-component>
</div>
Does it have to do with there being more classes defined on my form element? Is it because there's an element in between my div and my form (which is why I DIDN'T use the > in my CSS selector)?
Edit: I've also tried these:
div#doubled-up-well > member-add-member-demo > form.well.ng-untouched.ng-pristine.ng-valid {
padding: 0;
margin-bottom: 0;
background-color: red !important;
}
div#doubled-up-well form.well.ng-untouched.ng-pristine.ng-valid {
padding: 0;
margin-bottom: 0;
background-color: red !important;
}
Edit: Here's the fiddle with the exact html that is rendered on the page. FYI - the fiddle WORKS, it's only not working in my actual app.
https://jsfiddle.net/rv69f6ok/2/
I've run into this issue as well, and in my case it was because I had to write the styles in the specific component in which they need to be modified. If I tried to write .well .well in a global css or in the css of the parent component, it wouldn't work because the styles for each component are isolated to that specific component.
So in your case, I'd write a style for .well in the component that's the child, where you want to get rid of the padding. If you're using that component in other areas where you don't want that reduced padding to apply, I'd probably add some class to the same element where the child .well class is included. That extra class can serve as a flag that will have its own reduced padding value, and will overwrite the .well class your css by adding specificity like .foo.well { padding: 0; }
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.
Can you, and if so how do you, undo a css specification? Suppose you wanted
textarea { width: 500px; }
and then you want a specific textarea with 70 columns:
<textarea class='email' cols=70></textarea>
Ideally, I would write a css rule
textarea.email { width: revert_to_default_unspecified_value; }
(but obviously that value doesn't exist.)
How do you do this? I'm interested in both this specific case, and also how to undo parent css specifications in children. This must have been talked about plenty, but it's hard to google.
The default value you're looking for is:
Initial: auto
http://www.w3.org/TR/CSS2/visudet.html#the-width-property
Notice that setting auto will revert to default for just some of the CSS properties. Other have different initial values.
The background-color property, for example, has a default value of transparent.
Initial: transparent
http://www.w3.org/TR/CSS2/colors.html#background
Some of the properties, like color, can't be restored to a default because they don't have a known default.
Initial: depends on user agent
http://www.w3.org/TR/CSS2/colors.html#colors
About undoing inherited CSS in children.
Let's take the font-size property, a property that inherits.
level0
<div style="font-size:36px;">
level1
<div [style="font-size:medium;"]>
level2
</div>
</div>
By default the level2 font size would be inherited from level1, but if we add the initial medium value we reset it to the size of the level0 text. The only inconvenient is that we can't ignore just one level of inheritance, so if we would add a level3, we would still be resetting to level0, and not level1.
textarea.email { width: auto; }
I would assume that since if you do not specify a css width rule at all for this textarea, its default value would be width: auto. Thus I would try in the specific case setting it back to the default where the HTML attributes should take over as normal:
textarea.email { width: auto }
To reset styles you can now use unset and initial special properties. The support for unset is currently low (56%) -http://caniuse.com/#search=CSS%20unset%20value but support for initial is quite high (80%) - http://caniuse.com/#search=CSS%20initial%20value.
Consider the example:
http://codepen.io/anon/pen/OMROye
<div class="outer">
Foo
<div class="middle">
Bar
<div class="inner">
Baz
</div>
</div>
</div>
.outer {
font-size: 50px;
color: #f3f;
}
.middle {
font-size: 25px;
color: #33f;
}
.inner {
font-size: 15px;
color: #f33;
}
.inner {
font-size: unset;
color: unset;
}
The inner text will have font-size and color like its' parent.
If we change our last style to:
.inner {
font-size: initial;
color: initial;
}
The inner text will have standard color and standard font-size.
Now it is the best time to point out that these properties are a little trickier than they look, for example unset sometimes acts like initial and sometimes acts like inherit.
Links to docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/initial
https://developer.mozilla.org/en-US/docs/Web/CSS/unset
https://developer.mozilla.org/en-US/docs/Web/CSS/initial_value