I have an input element:
<input id="box" type="text" />
And the following CSS class:
.box-change
{
border-color:#ffffff;
}
As well as the following jQuery code:
$('#box').toggleClass('box-change');
However, it doesn't change the border color as I expect it to. Does anyone know why?
Edit:
The input already has a style, it is thus:
#box
{
border-color:#ff0000;
border-style:solid;
border-bottom-width:1px;
border-left-width:1px;
border-top-width:1px;
}
If you've originally removed border, then you'll have to set
border-width
and
border-style
So in short your CSS should look like:
.box-change
{
border: 1px solid #fff;
}
But it all depends what your initial style is, what colour is background of the containing element of your input etc...
Edit after you've provided more detail
your class doesn't get applied because class that sets style by ID has higher priority in cascade than CSS class. That's the main reason why you're not seeing it applied.
If you'd like your CSS class to take over you have two options:
set it as important:
.box-change
{
border: 1px solid #fff !important;
}
provide CSS rule that has higher specificity and will take over
#box.box-change
{
border: 1px solid #fff;
}
The second way is the preferred way, because using !important will make your CSS harder to maintain, since your classes don't cascade as per CSS but rather as per your importance. And you can easily loose control over that. Avoid important unless on seldom occasions.
How to troubleshoot this?
To help you in the future, you should be using developer tools in browser (Chrome DevTools or Firebug for Firefox) that would immediately show you the problem. And of course understand CSS specificity rules and how they cascade.
As your original styles are defined with #box it is more specific than .box-change, and by default overrides your new additions. It could also be that .box-change is higher up the cascade than #box.
You could solve it one of two ways:
#box.box-change{
border-color: #fff;
}
or
.box-change{
border-color: #fff !important;
}
Related
When autofilled, my input elements have a browser default style that I want to change. However, the browser styles all use !important and I can't seem to override them, even with a more specific selector that also uses !important. I think the exact styles that are causing the problem are these ones:
Screenshot of styles from dev tools
Is there a way to override them, either with CSS or JavaScript? I'm certain that I've seen input elements with custom autofill styles before. In case that's important - even though I want the override to work in all browsers anyways - I'm currently using Brave, which runs on Chromium, so selectors etc. should be the same that work for Chrome.
You don't need Javascript to solve this, and as a rule of thumb, you should use as less JS to manipulate your CSS as possible,
you can use the -webkit-autofill pseudo-selector to target those fields and style them as you see fit. The default styling only affects the background colour, but most other properties apply here, such as border and font-size. You can even change the colour of the text using -webkit-text-fill-colour, which is included in the snippet below.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid green;
-webkit-text-fill-color: green;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
transition: background-color 5000s ease-in-out 0s;
}
** note that this snippet is just an example that I had in handy; you can use it in many ways! **
I have a element like this:
#idname{
border: 2px solid black;
}
.classname{
border: 2px solid gray;
}
<div id = "idname" class="classname">it is a test</div>
I want to give a bigger priority to its CSS class instead of its CSS id. Is it possible? (In other word I want to set gray-color as its border)
Do not use !important because it is the worst solution, if you want to switch the styling then do it that way.
#idname{
border: 2px solid black;
}
#idname.classname {
border: 2px solid gray;
}
<div id = "idname" class="classname">it is a test</div>
If you want to target also other elements with the class classname and not only the #idname then use:
#idname.classname, .classname {
border: 2px solid gray;
}
What you're actually asking is how to give a class higher specificity than an ID.
An ID has a relatively high specificity of 100. A class has a specificity of 10.
There are many ways to increase the specificity of a selector.
Here are a few methods:
#idname.classname
Now this selector has a specificity of 110.
div#idname.classname
Now this selector has a specificity of 111 (because an element has a specificity of 1).
div[class="classname"]
This selector will fail to override an ID selector, because an attribute selector has a specificity of 10, and the total specificity for the selector is only 11.
The !important annotation
While specificity applies to selectors, the !important annotation applies to the declaration. It has the power to override all specificity points.
.classname { ... !important; }
You can think of !important as having a specificity of 10000, as illustrated in this specificity website. Although technically !important does not participate in specificity.
More information:
CSS Specificity
CSS Specificity: Things You Should Know
Relationship between !important and CSS specificity
You are going about this backwards. CSS rules have weight, and you should leverage those rules to correctly cascade styles.
element = 1 pt
class = 10 pt
id = 100 pt
inline = 1000 pt
!important = 10,000 pt
Consider this article on specificity
The !important clause, while it certainly works, builds inflexibility into your cascading rules and it becomes far too easy to do end up with competing directives.
My basic principle is to "generally" avoid IDs in CSS, and use them only when you need to override an existing class/element rule.
Ultimately, you are the author. Write your less specific rule as a class, and override it with an ID.
From my 14+ years building web stuff : if you have to use a !important clause, you are doing it wrong. I consider it very smelly.
That said sometimes it happens. You inherit someone else's terrible css, it can be hard to avoid.
A little other workaround solution that in some cases could help is to use
div[id=idname]{
border: 2px solid black;
}
.classname{
border: 2px solid grey;
}
I needed it in a drag&drop little game
This is a somewhat old question, and there are good answers throughout already.
However, if you are able to reasonably modify the CSS selector for the ID in question, you may be interested in the :where() CSS pseudo-class function:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#the_where_exception
Suppose you have this HTML:
...
<section id="some-id">
<p>I am feeling blue</p>
</section>
...
And you currently have this, but wish to have blue paragraphs in your section:
#some-id {
color: red;
}
p {
color: blue;
}
To use blue paragraphs, you could change it to:
:where(#some-id) {
color: red;
}
p {
color: blue;
}
In some respects, this could achieve inverse effects of the !important tag, although they are quite different types of CSS features.
I am trying to develop something where I need this requirement, I tried a couple of things, but not able to do it.
There is one style - A:
.someClass {
padding-right:10px;
}
now I want to add margin also in same class like - B:
.someClass {
margin-left:10px;
}
Now I need both, padding and margin. The thing is I can't modify A as it set by some third party JS, which doesn't reside locally.
So, is there any way I can achieve this by Pure CSS or JS (NO Jquery)
There is one style - A:
.someClass {
padding-right: 10px;
}
No, that is not a "style". That is a "rule". It says to apply padding-right to elements with the someClass class.
Now you add another rule:
.someClass {
margin-left: 10px;
}
That says to apply margin-left to elements with the someClass class.
Together the two rules do exactly what you want. The key point is that CSS will apply all rules whose "selectors" (here, the .someClass part) match the element in question. If the two rules contain the same properties, then there are ways (involving concepts such as "precedence" and "specificity") in which CSS will choose which one to apply, but that is not the case here, so both padding-right and margin-left will be applied to elements with the someClass class.
You can put both margin and padding into the element at once:
.someClass{
margin: 10px;
padding: 10px;
}
Also if the margin or anything else is set by like you said third party JS you can Override it in CSS by adding: !important so your code would look like this:
.someClass{
margin: 10px !important;
padding: 10px !important;
}
According to your question you need only padding to override.
Hope i understood your Question and could help.
When i load my Website in the client's url, there occurs a error which takes the css property from the client's css and changed in our css which affects my site.
Is there is any way to write all the property and value in my class so that it will not take from the client's css?
In cases where both stylesheets style the same properties but the wrong stylesheet is winning out (e.g. you have p {border: 1px solid green; color: blue} and the client css has p {border: 1px solid red} and the tables are getting a red border):
If possible, tweak your css to avoid the conflict. This may also require tweaking your markup. For example, if your css and the client's css provides styles for a class called .myclass, you could rename yours to .mynewclass.
You may also be able to get around this by increasing the specificity of your styles. For example, if .myclass is styled in the client css, your css could style body .myclass. For more on specificity, see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
There's always !important (e.g. .myclass {border-color: green !important}) which may make your styles win over the client's. Keep in mind that using a lot of !important is generally considered a sign of bad CSS.
In cases where the client stylesheet is styling a property you want left at the default (e.g. you want borderless divs, but the client css specifies p {border: 1px solid red}) you'll have to add an override: p {border: 0;}.
If you can wrap all your markup in an overriding class, you can do something like
/* client's styles */
p {
border: 1px solid blue
}
/* your styles */
.reset p {
border: 0;
}
<p>client (border)</p>
<div class="reset">
<p>you (no border)</p>
</div>
Or maybe everything you add to the site is always inside the same element, like .main. In that case, in the above example you could style .main p.
If using a wrapper won't work, you can always add a reset class to every one of your elements. That will be a hassle, but it'll work:
/* client's styles */
p {
border: 1px solid blue
}
/* your styles */
p.reset {
border: 0;
}
<p>client (border)</p>
<p class="reset">you (no border)</p>
If you do a bunch of work with this client, it could be worth developing a "reset.css" with all your reset rules.
Do you have the style-loader in your css loader? Look into the rendered DOM and compare the position from the client-css and your react-css. I suspect the react css is inserted as a style tag before the client-css link tag.
Use the extract-text-plugin to generate a separat css file, which you can insert into your DOM after the client's css by hand.
I do not understand why internal css does not overwrite the external css created by google ...
This external css need to create the Google search bar (in my case, only serves to create a results page-SERP)
<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"> </script>
<style type="text/css">
.gs-result .gs-title, .gs-result .gs-title * {
}
.gs-result a.gs-visibleUrl, .gs-result .gs-visibleUrl {
color: #008000;
text-decoration: none;
display: none;
}
.gsc-table-result {
font-family: 'PT Sans', Arial,sans-serif;
font-size: 14px;
width: 100%;
}
</style>
<script type="text/javascript">
google.setOnLoadCallback(googlata);
google.load('search', '1');
// other js-code that works ;)
</script>
</head>
why ???
thanks!
EDIT
the result page is created by google cse and is added in my div.. this the code created:
<div id="cse"> //my div
<div class="gsc-control-cse gsc-control-cse-it"> //here there is a google code... i show you only parents beacause the code is too long
<div class="gsc-control-wrapper-cse" dir="ltr" style="visibility: visible;">
</div>
Here there is a part of my code:
http://jsfiddle.net/2rg86vm6/1/
is only a part so doesn't work ;)
The answer to "Why isn't my CSS being applied?" is almost always that some other style definition is overriding it. When this happens, it can be frustrating, but don't despair: There are only 2 things you need to know:
Understand selector strength and CSS specificity.
Know how to use your browser's developer tools.
CSS Specificity and selector strength
The "selector" is the part of your style definition that targets (or "selects") your element. It's the code that comes before the curly braces in your CSS:
.gs-results {
color: #008000;
text-decoration: none;
display: none;
}
The above snippet represents a single CSS rule. The selector for the above rule is .gs-results.
Selector strength is important when you have two rules that match a single element and the styles conflict:
.a { color: blue; }
p { color: red; }
<p class="a">Am I red or am I blue?</p>
In the above example, the text is blue because a class selector has a higher specificity than an element selector. If you wanted to force the text red, you could strengthen your p selector by adding the class to it:
.a { color: blue; }
p.a { color: red; }
<p class="a">Am I red or am I blue?</p>
Now the text will be red because a selector consisting of element and class has a higher specificity than just a class selector. We can make in blue again, by increasing the specificity of the first selector. For example, specifying an ancestor class:
.x .a { color: blue; }
p.a { color: red; }
<div class="x">
<p class="a">Am I red or am I blue?</p>
</div>
Further reading:
CSS Standard: Calculating specificity The algorithm is actually quite simple.
CSS Specificity calculator
Finding conflicting selectors
Understanding specificity is vital, but only helpful if you know the style rule that is overriding your own. Fortunately, every browser comes with excellent developer tools that make discovering applied rules a breeze.
In any browser, right click the element whose styles are not being applied as you expected, and choose "Inspect Element". This will open the developer tools with the DOM inspector open and the clicked element selected. You may have to manually select a parent or child element of the one that is selected. Once you have the correct element selected, look at the rules that are being applied. You should see yours in the list with the style properties in strikethrough:
If your particular element has a lot of style rules applied and you are having trouble finding the CSS property you care about, try the "Computed" tab. Additionally, Chrome let's you filter the styles displayed by entering the property you are interested in where it says "Filter...". IE let's you filter the computed tab.
Now that you have identified what rule is overriding your styles, you can see how you need to strengthen your selector. This should not be a difficult thing. We will get our text back to red by borrowing from the other rule's selector:
.x .a { color: blue; }
.x p.a { color: red; }
<div class="x">
<p class="a">Am I red or am I blue?</p>
</div>
Why not just use !important?
Stephanie Rewis's tweet says it best:
Using !important in your CSS usually means you're narcissistic & selfish or lazy. Respect the devs to come...
It causes maintenance headaches. If this is code you will ever need to maintain, you will hate yourself later for using !important. If other devs need to maintain it, they will hate you.
Use !important on your code, altough I would not encourage you to do that permanently, use it just for testing (better way is to strenghten your selector):
.gs-result a.gs-visibleUrl, .gs-result .gs-visibleUrl {
color: #008000 !important;
text-decoration: none !important;
display: none !important;
}