My page includes a legacy css file which defines a style for the :invalid psuedo-class. I want to use some of the styles from this file, but I do not want invalid inputs to be red by default, I want input fields to use the default styling for input fields defined in the legacy file.
legacy.css
input:invalid {
background-color: #F00
}
Is there a way to override the style defined in legacy.css, and force it to use some other style from the file? Is there a better option for approaching this?
my.css
input:invalid {
// super input:valid
}
If your CSS is loaded after the legacy one, it will take priority, otherwise, just add !important to your style
input:invalid {
background-color: #FF00 !important
}
Have you tried, the initial value for background-color to set background's color to default value ?
input:invalid{
background-color: initial;
}
If the css file "legacy.css" have some style for this selector, they are not modified normally
Use !important; in legacy.css to override the selector in my.css.
OR
Make your selector in my.css more specific so that it has greater weight over the selector in legacy.css. This is called specificity. More about this here
You can use intitial for the property value.
The initial CSS keyword applies the initial value of a property to an element.
Just make sure your selector appears after the original selector.
input:invalid {
background-color: #F00
}
input:invalid {
background-color: initial;
}
<input type="email" name="email" required>
When using !important you artificially increase the properties weight (not exactly specificity, but similar). I would avoid using !important as it is typically bad practice and not required here.
Related
How do I override properties for an element with a specific ID using Foundation and Sass?
I have a <section id='myid'> and want to override some properties for this:
#myid {
background: blue;
color: white;
}
If I put this in a CSS file, or in the app.scss file it won't be applied. It is in the compiled file but the default settings still take precedence.
How can I force these settings to have the highest precedence?
You need to take into account "specificity" of CSS, the #id generally takes precedence but it really depends on how the rules where declared in the first place. I'm not an expert of Foundation but you can read more about the subject on CSS-Tricks: http://css-tricks.com/specifics-on-css-specificity/
A quick-and-dirty solution would be to use the !important flag on the properties, but I suggest you only do it as a last resort:
#myid {
background: blue !important;
color: white !important;
}
The page I am working on has many different CSS files attached to it, a boostrap.css, the master.css and a custom.css file.
I'm trying to remove a property, as I don't want there to be a a:hover property on the link in a menu. The master CSS file has
#topSurround a:hover {
color: #ffffff;
}
The bootstrap CSS file has
.nav > li > a:hover {
text-decoration: none;
background-color: #eee;
}
I don't want to edit these files, as they are core files with the template I am using and could be updated, so I am using a custom CSS file. Normally, I would set the property to default to override any previous uses of the property.
#topSurround a:hover {
color: none; (doesn't work, as this isn't the correct default)
}
So, two questions: What is the default value for the color property (there doesn't seem to be one)? Is there an easier way to go about this without having to overwrite the core files?
You can use color: inherit to have the color use the value from its ancestors. color is odd in that it has different default values depending on context. A link, for example, will typically default to blue, while text will default to black.
If you need to override the existing style, don't use a more specific selector. Raising the specificity means that you'll just have to use more selectors the next time you want to override it.
Instead, take advantage of the cascade by using a selector with identical specificity and make the override happen after the original style:
/* older style in some library */
.foo .bar .baz {
color: blue;
}
...in an overriding CSS file...
.foo .bar .baz {
color: green;
}
To cancel out the property you can use unset keyword.
So, in you custom css file you can do something like following:-
#topSurround a:hover {
color: unset;
}
According to the MDN Web Docs:-
The unset CSS keyword resets a property to its inherited value if it inherits from its parent, and 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. It can be applied to any CSS property, including the CSS shorthand all.
The best way is to make a more specific CSS rule, such as:
body #topSurround a:hover {
color: transparent;
}
Specificity is an important CSS concept, as described in this article:
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
I'd recommend trying:
#topSurround a:hover {
color: inherit;
}
As for how to overwrite what Bootstrap is adding, I think how you were doing it is best.
Every CSS style has a natural default value. It's just not always none.
Some may be 0 (as in zero).
Some may be auto.
Sometimes inherit is the best option.
Colours can be set to transparent.
If you're unsure what the default is, try creating a dummy page with just a plain unstyled element, and use the browser dev tools to see what the styles are set to.
I use custom css for my text inputs:
input[type="text"]{
background-color: #f9f9f9;
}
I want to change background color — and more — if validation fails adding an error class with jQuery:
.error{
background-color: #f9abab;
}
The problem is input[type="text"] selector has precedence and simply the background color keeps unchanged. I can see it in Firebug / Inspect element.
Is adding !important to .error the only way?
No : you can be more specific in your CSS declaration.
Try
input[type="text"].error{
//stuff
}
See this article about CSS precedence for further informations
Is there a way to import the styling of a single CSS selector into another CSS selector and add to it or rewrite properties from it.
Let's say:
.original_class{
background:black;
color:white;
}
.overwrite{
#import(.original_class); /* I know this doesn't work */
color:blue;
border:1px solid green;
}
I can accomplish this by just redeclaring the .original_class and assigning new values (since CSS styles are rewritten from top to bottom), but this will replace the attributes of the original CSS class. What I want is to inherit its properties into another class without having to write them again (duplicate).
Not directly, no.
You could do something like this in your HTML:
<div class="original_class overwrite">...</div>
This will have the same effect, but you will have to do this for every element you want styled that way.
There is also the option of using a CSS pre-processor, like SASS, which supports inheritance/mixins.
You can add the .overwrite selector to the first rule by separating it from the existing selector with a comma (grouping selectors), so the selector rule becomes .original_class, .overwrite:
.original_class,
.overwrite {
background: black;
color: white;
}
.overwrite {
color: blue;
border: 1px solid green;
}
Also, when you write:
this will replace the attributes of the original CSS class
there is no such thing as attributes and class in CSS, not with the intended meaning of OOP I guess. There are rules, selector rules (to select HTML id, classes, elements, attributes and other pseudos), declarations, properties and values.
Unfortunately not. At least not without one of those fancy CSS plugin thingies that I wouldn't touch with a mile-long pole...
Of course, there's nothing stopping you having multiple classes on a single element.
If I add a style like:
* {
font-size: 14px;
}
and later I define for an element:
#myElement {
font-size: 18px;
}
The fist one will override the second one.
Is there a way to define the first one, such as the second one will override it, and the 14px size will be applied to all the elements that don't define a size?
(I would like alternatives to the use of classes)
The element #myElement will override the first rule as it is more specific. If #myElement has children then the children will match the global selector. Try setting the rule on body.
Use !important
#myElement {
font-size: 18px !important;
}
It's worth noting that in your example if you specifcally set a style on that element, be it a class or id, it will inherit properties but any specific styles it will overwrite. So doing the above is pretty pointless. This can be demostrated like so:
<style type="text/css">
* {
font-size: 60px;
}
#blah2 {
font-size: 14px;
}
</style>
<span id="blah1">i'm default size</span>
<br/>
<span id="blah2">i'm specially 14px</span>
fiddle: http://jsfiddle.net/garreh/3YuLD/
No, the first one will not override the second one. A selector with an id is more specific than a selector with an element, so the second will override the first one.
To override a rule you just have to make a rule that is more specific. Just count the number of id, class and element specifiers in the selector, where id is most specific.
You can read more about selector specificity here:
css.maxdesign.com.au/selectutorial/advanced_conflict.htm
The second rule should override the first one. Make sure your element has id="myElement". Use an inspector (such as Firebug or Chrome's Web Dev Tools) to see what styles are applied to your element an which are overridden.