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.
Related
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;
}
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;
}
I've developed a JavaScript Bookmarklet that have appended div to the current page.
But problem is that, when div and its content loaded because of pages' original CSS codes (Bookmarklet has its own CSS as well), my div's appearance corrupts.
I mean, on every page, some of elements looks different (sometimes labels' heights, sometimes textarea's backgroundcolor, etc.)
Is there a way to correct this fault that you know? It can be a CSS or JavaScript solution.
Is there any way to correct this fault that you know?
Yes, define every relevant property inside the DIV and !important:
<div style="width: 300px !important; line-height: 1em !important....">
there is no other perfectly fail-safe way. All external widgets I've seen do it this way.
It sounds like what you're saying is the page's CSS overrides your default styling of the content you inject. This is probably due to one of two things: not specifying every style attribute (and using relative values) for your content or your specificity isn't high enough.
Specify every style attribute
Let's say your content looks like this:
<div id="#cool-bookmarklet">Here is some content</div>
And your CSS looks like this:
#cool-bookmarklet {
color: #000000;
font-size: 80%;
}
Two problems with the above. Only two style attributes are declared, therefore every other attribute will be inherited from other styles. What if the page had CSS like this?
div {
width: 70%;
background-color: #000000;
}
You'll have problems because that CSS applies to your content (the div). Your div 'cool-bookmarklet' will be 70% the width of its parent and have a black background color. Not good.
Also, the font-size is a relative value, meaning it will be 80% of whatever the inherited value is. So if the font-size specified by the page is 10px, your font will be 8px. Here it's probably best to use explicit sizing to avoid any issues of inherited styles.
This is how your CSS should look to avoid inherited styles:
#cool-bookmarklet {
color: #000000;
font-size: 12px;
width: 400px;
background-color: #ffffff;
margin: 0;
padding: 0;
font-weight: normal;
/* etc, etc */
}
Specificity
There's a part of CSS that many people don't learn (and took me a while to understand) and it's called specificity. Specificity is used by browsers to determine what CSS styles to apply to elements when two selectors conflict.
From the CSS spec:
A selector's specificity is calculated as follows (from the spec):
Count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
Count the number of ID attributes in the selector (= b)
Count the number of other attributes and pseudo-classes in the selector (= c)
Count the number of element names and pseudo-elements in the selector (= d)
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
So a = styles in a style attribute of a html element. b = id selectors, c = class names and attributes, d = tag names. The selector with the highest specificity 'wins' if two selectors target the same element.
It's a little confusing, but you get the hang of it after a few tries.
Let's say you have these two rules in your CSS:
#cool-bookmarklet { color: red; }
div { color: blue; }
And the content:
<div id="cool-bookmarklet">Here is some content</div>
The selector '#cool-bookmarklet' would have a specificity of 100 (a=0, b=1, c=0, d=0). The selector 'div' has a specificity of 1 (a=0, b=0, c=0, d=1). '#cool-bookmarklet' would win and the div will have red text.
This is relevant because if your bookmarklet injects a stylesheet to style your content, other CSS on the page could override it if the specificity is higher. It's often easiest to give your content an ID (which has a high specificity 'b'). This allows you to target your content and not worry about other styles overriding.
Hope that helps!
I don't fully understand the question. Perhaps a little snippet would help?
If you are worried that existing styles might override the styles on the elements you are dynamically adding, you can add the !important tag. But if the styles are inline (which is invariably what happens with bookmarklets) there should be no need for that.