#top a {
color: #C6D6CA;
margin: 0 25px;
text-decoration: none;
}
.mainlink a {
display: block;
height: 100%;
width: 100%;
margin: 0;
}
.mainlink div sits somewhere in the #top one. Why's that the #top a (parental) definition of margin overwrites the one set in .mainlink a? How to change that behaviour?
You can fix it by changing your rules:
#top a {}
#top .mainlink a {}
This is called selector specifity. See also: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
Since CSS "cascades" the color will apply to any of the element's children. You'll need to specify the color for the child and possibly need to add an "!important" to the end of the property declaration.
Named ids have a higher precedence than classes when the style sheets are cascaded.
http://www.w3.org/TR/CSS2/cascade.html
You can use margin: 0 !important to force the override.
The #top a selector has more specificity than .mainlink a. ID selectors greatly increase the specificity of a selector.
Each ID increase the specificity of the selector by a factor of 100. Each class increases the specificity by a factor of 10.
That being the case, I'd either:
A. Replace the ID with a class or
B. Add an ID to the second selector.
Related
what is the way to child element not inherit parents property?
I know way to child element declare individually property.
I curious that people use another way.
You can either set some styles only for that element:
p{ color:red; }
or overwrite the default inherited styles (like margin in this case):
p{ margin: 0; }
or, in some contexts add a class or an id to add more weight to the selector (adding an id to the p):
div p{ color: blue; }
#myParagraph{ color: red; }
This could be a way
div{
padding:10px;
}
div *{
padding: 0px;
}
But its highly NOT RECOMMENDED for elements with many children
Say I would like to define a numbered circle, that looks like this:
http://jsfiddle.net/edi9999/6QJyX/
.number
{
border-radius: 50%;
width: 32px;
height: 24px;
text-align: center;
padding-top:8px;
font-size: 14px;
display:inline-block;
line-height: 16px;
margin-left:8px;
color:white;
background-color:black;
border-color:white;
}
I would like to add importance to the selector, so that no matter in what context the element is, an element with class number looks the same.
Here's an example of the code breaking: http://jsfiddle.net/edi9999/6QJyX/2/
A way to do this would be to add !important to all properties of the CSS, but I wonder if they could be other solutions, because it is a bit crappy.
I have added the private tag as that seems a bit like code-encapsulation.
Your best option is to increase the specificity of the selector. Other than that there is not much you can do.
#id .number
The ID selector will increase specificity so that only another ID in a selector will be able to override it.
http://jsfiddle.net/6QJyX/3/
Increasing the specificity of selectors will only lead to specificity wars (which leads to anger, which leads to hate, which leads to suffering). I would suggest decreasing the specificity of the selector that's causing the problem.
Pseudo code below:
.number {...}
.card span {...} // this selector is questionable
<div.number> this is styled correctly </div>
<div.card>
<span.number> this is styled incorrectly </span>
</div>
Why do all .card spans need to be styled a particular way? It seems as if the second selector is more like a grenade and less like a sniper—that is, it targets a blanket set of elements rather than just the ones you need.
#iddiv span {
display: inline-block;
width: 190px;
}
.myclass {
width:10px;
}
Then I have
<div id="iddiv">
<span>hello:</span>
<span class="myclass">yeah</span> <br/>
</div>
I would like the first span's width to be 190px, and second's to be 10px. But both are 190px: why it's not overriding the width propoerty?
EDIT: Thanks for your responses. What about unsetting width? I don't want 10px width, just default width as if it was undefined
You could always use the !important flag to override:
.myclass {
width: 10px !important;
}
Because id+selector (#iddiv span) is more specific than a class. Either
#iddiv span.myclass
or
#iddiv .myclass
should work for this case.
Learn more about CSS specificity here or by Googling it.
CSS applies styles according to the specificity of the selectors
#iddiv span is more specific than myclass. Changing it to #iddiv .myclass should fix the issue for you.
Here's an article that goes more in depth about this : http://htmldog.com/guides/cssadvanced/specificity/
Remember to use the keyword, !important, which functions to overwrite parent rules.
Also you can define your "myclass" in the following way:
#iddiv span.myclass {
width:10px;
}
It's not working because the first style is more specific.
To fix it, make sure you target the second span more directly, like this
#iddiv span.myclass
http://jsfiddle.net/jasongennaro/5fe9A/
First of all, I'd suggest you properly target your selectors, as others are suggesting.
But when all else fails, you can use !important.
My Html is like this:
<a class="another addAnother">Add another</a>
I defined a style for the above using 'another' class like this in a external style sheet.
fieldset.associations a.another {
color: #693;
display: block;
margin: 7.5px 0px 15px;
}
I am trying to override the style of tag using 'addAnother' class, like this(wherever required):
fieldset.associations a.addAnother {
display: none;
}
But I am unable to override. Any help is appreciated.
Is there any rule that while overriding a style the selector should be same(I tried this, but no avail)??
Both properties have the same importance, because both selectors are equally specific. So if the second one appears first in the CSS, it needs to acquire more importance to override one that is lower down. You could override the first one by being more specific, like this:
fieldset.associations a.addAnother.another {
display: none;
}
or
#someID fieldset.associations a.addAnother {
display: none;
}
or
body fieldset.associations a.addAnother {
display: none;
}
Both your original declarations have a specificity of 0,0,2,2. If the second declaration is below the first, it should overrule it. If it doesn't, reorder your declarations or increase the specificity.
You could add the body tag in order to increase specificity:
body fieldset.associations a.addAnother {
display: none;
}
That will increase specificity by 0,0,0,1, the minimum amount of specificity you can add.
You can also make it specific to the .another class by chaining class declarations:
fieldset.associations a.another.addAnother {
display: none;
}
That will increase specificity by 0,0,1,0.
Here is an article explaining CSS specificity. Note that the article fails to mention that !important increase specificity by 1,0,0,0, making it near impossible to overrule.
fieldset.associations a.addAnother {
display: none !important;
}
It would ultimately depend on where those two styles are in your CSS, but you can't give one more importance like this:
fieldset.associations a.addAnother {
display: none !important;
}
My webpage contains:
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<style type="text/css">
td {
padding-left:10px;
}
</style>
The referenced stylesheet contains:
.rightColumn * {margin: 0; padding: 0;}
I have a table in the rightcolumn ID where I want the cells to have a little padding. However, the referenced stylesheet is taking precedence over the inline styling. I see this visually and also via Firebug. If I turn off the padding:0 instruction in Firebug, the padding-left takes effect.
How can I get the padding-left to work?
Most of the answers are correct in saying that this is a specificity problem but are incorrect or incomplete in explaining the specificity rules.
Basically in your case .rightColoumn * is "more specific" than td and so that rule wins even though it comes earlier.
The CSS 2.1 rules are located here. These rules are:
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 in your case you have two rules:
.rightColumn * {} /* a = 0, b = 0; c = 1, d = 0 : Specificity = 0010*/
td {} /* a = 0, b = 0, c = 0, d = 1 : Specificity = 0001 */
0001 is lower than 0010 and thus the first rule wins.
There are two ways to fix this:
Use !important to make a rule more "important". I'd avoid doing this because it is confusing when you have lots of rules spread out over several files.
Use a higher-specifity selector for the td you want to modify. You can add a class name to it or an id and this will allow you to supersede the rule from the linked CSS file.
Example:
<style>
.rightColomn * { padding: 0; } /* 0010 */
td#myUnpaddedTable { padding: 10px; } /* 0101 */
td.anUnpaddedTable { padding: 10px; } /* 0011 */
</style>
Edit: Fixed the specificity rules for *. David's comment prompted me to re-read the spec, which does show that the * selector contributes nothing to the specificity score.
As others have mentioned, you have a specificity problem. When determining which of two rules should take precedence, the CSS engine counts the number of #ids in each selector. If one has more than the other, it's used. Otherwise, it continues comparing .classes and tags in the same way. Here, you have a class on the stylesheet rule, but not on the inline rule, so the stylesheet takes precedence.
You can override this with !important, but that's an awfully big hammer to be using here. You're better off improving the specificity of your inline rule. Based on your description, it sounds like your .rightColumn element either is or contains a table and you'd like the cells in that table to have extra spacing? If so, the selector you're looking for is ".rightColumn td", which is more specific than the stylesheet rule and will take precedence.
The easiest way to get it to work is to add "!important" to CSS to guarantee its precedence (unless you've got multiple !important rules):
td {
padding-left: 10px !important;
}
If you're looking for an answer without !important, you should read into CSS specificity specifications. The linked site has a good explanation of how it works, though basically it goes from most important to least, with id selectors most important, class selectors second, and element selectors third.
Try this instead:
td.rightColumn * {margin: 0; padding: 0;}
The td in the external stylesheet is more specific so it wins out. If you qualify the rightColumn class with an element name then the page-level styles will be applied.
You could try adding the ! important flag to your inline css.
e.g.
td { padding-left:10px ! important; }
Also, for general rules on css rule ordering, have a look at this :
http://www.w3.org/TR/CSS2/cascade.html#specificity
Do this:
.rightColumn *,
td.rightColumn * {
margin: 0;
padding: 0;
}
Precedence in CSS is as follows:
If some rule has an ID, then it will precede anything else.
If some rule has a class attribute, it will precede tag-only rules.
If two rules have both IDs or tags, then the number of them untie the "fight".
Example:
<style type="text/css">
#myid{
padding: 10px;
}
.class{
padding: 20px;
}
</style>
<div id="myid" class="class"></div>
Although your div has both ID and a class, the ID rule will override the .class rule.
To read more about CSS rules priorities, I'd recommend http://www.w3.org/TR/CSS2/cascade.html#specificity.
ok i admit i'm kind of late to the game here.. but 3 years on i guess i can still shoot for that first place answer..
the extra sauce in my answer is that there's an exmaple of css with 2 levels of class name..
in the below example you can see the 'td' with no class gets the ".interval td" style and the td with "indragover" class gets the "table.interval td.indragover" style..
(this code comes is for html drag and drop so there's some javascript applying the 'indragover' class to the td in dragenter, dragleave events)
// put this in a css file
.interval {
height: 100%;
width: 100%;
background: #FFFFCC;
border: 2px solid #000000;
border-collapse: collapse;
}
table.interval tr td {
border: 2px solid black;
color:#112ABB;
background: #FFFFCC;
height: 20px;
}
table.interval td.indragover {
background: #AAAA00;
}
// put this in a html file
<table class="interval">
<tr><td>blah</td><td class="indragover">blah</td></tr>
<tr><td class="indragover">blah</td><td>blah</td></tr>
</table>
1.div p.bio {font-size: 14px}
#sidebar p {font-size: 12px}
The first line of CSS might seem more specific at first glance, but it's actually the second line above that would be more specific to the font-size of your paragraph.
An id is more specific than a class, which is more specific than an element.
2.p {font-size: 12px}
p.bio {font-size: 14px}
The second line of CSS (p.bio) is more specific than the first when it comes to your class="bio" paragraph.
the precedence level of class is higher than the p element.