I was in a Web Development Class in my University Computer Science Department and the teacher asked the class: "Why a class selector rule was getting applied over a tag selector rule (see example code)?".
I answered that it was because of the CSS specificity and I was told I was wrong. The answer he wanted was because of the CSS inheritance.
While it is true, why is the CSS specificity an incorrect answer?
p {
color: red;
}
.section {
color: green;
}
<p class="section">Section</p>
As I said in the comment, I believe you were right: inheritance in CSS is related to the DOM hierarchy. Certain styles are inherited from parent elements.
Specificity has to do with which CSS rules take precedence over other CSS rules. See below for some examples.
.container {
font-size: 35px;
}
p {
color: red;
}
.section {
color: green;
}
div.section {
/* More specific then .section rule */
color: purple;
}
<div class="container">
<p>
Example of inheritance. This paragraph has inherited the font-size of its parent.
<span>This span also inherited font-size.</span>
</p>
</div>
<div>
<p class="section">
Example of specificity. The "section" class is more specific than the rule created for the p element. Therefore, styles defioned in the "section" class rule may override those defined in the p element rule.
</p>
<p>
No class applied.
</p>
<div class="section">
The "div.section" rule is more specific than the ".section" rule, so this text is purple.
</div>
</div>
Related
Why is the computed font-size 22.08px(1.38em) rather than 16px?
.stec {
font-size: 16px !important;
}
#content p {
font-size: 1.38em; /* why does this override !important? */
}
<div id="content">
<div class="stec">
<p>some paragraph text</p>
</div>
</div>
16px is !important but it's not being applied. Here's the computed style window from the Chrome debugger:
Inherited styles have a very low precedence. From the MDN:
Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule.
So, that's your problem; .stec and #content p don't target the same elements. #content p overrides the style inherited from .stec.
Consider the following example. You might expect the paragraph text to be red, inherited from its div parent... but it's not:
div {
color: red !important;
}
p {
color: blue;
}
<div> <!-- !important is applied here -->
This text is red.
<p>Were you expecting this text to be red too?</p> <!-- not here -->
</div>
It's also not about specificity, as others have mistakenly suggested. It's about whether the rule actually targets the appropriate element. Consider the following example:
p {
color: red !important;
}
#test {
/* this is the more specific selector, yet it's overridden by !important */
color: blue;
}
<p>red</p>
<p id="test">were you expecting blue?</p>
p and #test both apply directly to the second paragraph; so, there's an opportunity for !important to override something.
Here is the markup that I have
<div class="sign-in ">
<form>
<fieldset>
<p class="note">
Note
</p>
</div>
The CSS rule that one of my stylesheet has is this :
.sign-in p{
margin: 5px 80px;
}
I need this style rule to be overwritten for p tags that have a note class along with that.
SO I apply this style rule
.sign-in .note p{
margin:0px;
}.
However, the original style rule still sustains itself instead of being overridden by the new style rule that I have applied.
Here is this in js fiddle: http://jsfiddle.net/fNepf/
What am I doing wrong?
Your selector is wrong,
use:
.sign-in .note{
margin:0px;
}
Your selector should be:
.sign-in p.note {
margin:0px;
}
You were selecting all <p>'s which are descendants of the class .note.
jsFiddle.
Your selector should instead be:
.sign-in p.note {
margin: 0px;
}
As the selector you posted is looking for a <p> that is a descendant of an element with class .note instead of a <p> element with the class .note
http://jsfiddle.net/fNepf/2/
If you have two classes on the <p> you could use .sign-in p.note.test {}:
http://jsfiddle.net/fNepf/3/
I have markup that uses inline styles, but I don't have access to change this markup. How do I override inline styles in a document using only CSS? I don't want to use jQuery or JavaScript.
HTML:
<div style="font-size: 18px; color: red;">
Hello World, How Can I Change The Color To Blue?
</div>
CSS:
div {
color: blue;
/* This Isn't Working */
}
The only way to override inline style is by using !important keyword beside the CSS rule. The following is an example of it.
div {
color: blue !important;
/* Adding !important will give this rule more precedence over inline style */
}
<div style="font-size: 18px; color: red;">
Hello, World. How can I change this to blue?
</div>
Important Notes:
Using !important is not considered as a good practice. Hence, you should avoid both !important and inline style.
Adding the !important keyword to any CSS rule lets the rule forcefully precede over all the other CSS rules for that element.
It even overrides the inline styles from the markup.
The only way to override is by using another !important rule, declared either with higher CSS specificity in the CSS, or equal CSS specificity later in the code.
Must Read - CSS Specificity by MDN 🔗
inline-styles in a document have the highest priority, so for example say if you want to change the color of a div element to blue, but you've an inline style with a color property set to red
<div style="font-size: 18px; color: red;">
Hello World, How Can I Change The Color To Blue?
</div>
div {
color: blue;
/* This Won't Work, As Inline Styles Have Color Red And As
Inline Styles Have Highest Priority, We Cannot Over Ride
The Color Using An Element Selector */
}
So, Should I Use jQuery/Javascript? - Answer Is NO
We can use element-attr CSS Selector with !important, note, !important is important here, else it won't over ride the inline styles..
<div style="font-size: 30px; color: red;">
This is a test to see whether the inline styles can be over ridden with CSS?
</div>
div[style] {
font-size: 12px !important;
color: blue !important;
}
Demo
Note: Using !important ONLY will work here, but I've used
div[style] selector to specifically select div having style
attribute
You can easily override inline style except inline !important style
so
<div style="font-size: 18px; color: red;">
Hello World, How Can I Change The Color To Blue?
</div>
div {
color: blue !important;
/* This will Work */
}
but if you have
<div style="font-size: 18px; color: red !important;">
Hello World, How Can I Change The Color To Blue?
</div>
div {
color: blue !important;
/* This Isn't Working */
}
now it will be red only .. and you can not override it
<div style="background: red;">
The inline styles for this div should make it red.
</div>
div[style] {
background: yellow !important;
}
Below is the link for more details:
http://css-tricks.com/override-inline-styles-with-css/
used !important in CSS property
<div style="color: red;">
Hello World, How Can I Change The Color To Blue?
</div>
div {
color: blue !important;
}
!important, after your CSS declaration.
div {
color: blue !important;
/* This Is Now Working */
}
div {
color : blue !important;
}
<div style="color : red">
hello
</div>
I would like make all text within div.main gray except for all content within the child div.exception. div.exception should appear as if class main was never added to the parent div.
Is this possible? If so, how? Thanks!
<style type="text/css">
.main{color: gray;}
.hello{color: red;}
</style>
<div class="main">
<div>
<div class="exception"><p class="hello">Hello</p><a>Link</a></div>
</div>
<div><p>Howdy</p></div>
<div><a>Link</a></div>
</div>
for modern browser, just apply the rules to every div but .exception
.main div:not(.exception) p {
/* style for very nested div not exception */
}
otherwise override the rules later (as suggested by #jacktheripper)
This is simply done by:
.main .exception {
your styling here (e.g. color: black)
}
See this jsFiddle example
You cannot use color: inherit as this selects only the immediate parent, when you want to select two parents above. Therefore you have to override the colour 'manually'
#F. Calderan's answer is an alternative, but browser support is variable
No, that's not possible.
You can easily override the style so that it appears not to have been colored gray, but then you have to know what the original color was:
.main .exception { color: black; }
If you would set the style on the inner elements directly intead of on the main element, and set the exception class on the same level, you could override it using inheit:
<style type="text/css">
.main div { color: gray; }
.main div.exception { color: inherit; }
.hello { color: red; }
</style>
<div class="main">
<div class="exception">
<div><p class="hello">Hello</p><a>Link</a></div>
</div>
<div><p>Howdy</p></div>
<div><a>Link</a></div>
</div>
I have only a basic knowledge of css, is it possible to inherit a property from one style into another style. So for instance I could inherit the font size specified in my default paragrah tag settings into my hyperlink tags.
The reason I want to do this is to make it easier to maintain multiple styles.
You can define common styles for two elements at once like so:
p, a {
font-size: 1em;
}
And then extend each one with their individual properties as you want:
p {
color: red;
}
a {
font-weight: bold;
}
Keep in mind: Styles defined later in a style sheet generally override properties defined earlier.
Extra: If you haven't already, I recommend getting the Firebug Firefox extension so you can see what styles the elements on your page are receiving and where they are inherited from.
No CSS doesn't have any way to inherit styles. But there are several ways you can share styles. Here are a few examples:
Using multiple classes
<p class="first all">Some text</p>
<p class="all">More text</p>
<p class="last all">Yet more text</p>
p.all { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }
Use the comma operator in your styles
<p class="first">Some text</p>
<p class="middle">More text</p>
<p class="last">Yet more text</p>
p.first, p.middle, p.last { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }
Using container elements
<div class="container">
<p class="first">Some text</p>
<p class="middle">More text</p>
<p class="last">Yet more text</p>
</div>
div p { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }
None of these are exactly what you are looking for, but using these techniques will help you keep CSS duplication to a minimum.
If you are willing to use server side code to preprocess your CSS, you can get the type of CSS inheritance you are looking for.
http://wiki.framwurk.org/documents:csspp/
http://mail.python.org/pipermail/python-list/2006-August/397266.html
http://www.shauninman.com/archive/2008/05/30/check_out_css_cacheer
Yes.
You should understand how the cascade in CSS works, and also understand how inheritance works. Some styles will inherit (like the font face) and some styles wont (like the border). However, you can also tell styles to inherit from their parent elements inside the DOM.
Of some help here is knowledge of how style rules are specified. This site about the CSS Specifity Wars might help (Note: this site is currently down, but hopefully it will be back soon).
Additionally, I find it sometimes helps to overload styles like this:
h1, h2, h3, h4, h5 h6 { font-weight: normal; border: 1px solid #ff0; }
h1 { font-size: 300%; }
... etc ...
"...is it possible to inherit a property from one style into another style. So for instance I could inherit the font size specified in my default paragrah tag settings into my hyperlink tags."
The link tags will automatically use the fonts from the paragraph, if, and only if, they are within a paragraph. If they are outside of a paragraph (say in a list) they will not use the same font, etc.
For instance this css:
* {
margin: 0 10px;
padding:0;
font-size: 1 em;
}
p, a { font-size: 75%; }
will generate links and paragraphs that are sized at .75em. But it will display links within paragraphs at about .56em (.75 * .75).
In addition to the specificity reference cited by Jonathan Arkell, I recommend the CSS Tutorial at W3Schools.
CSS will automatically inherit from the parent style. For example, if you say in your body style that all text should be #EEE and your background should be #000 then all text, whether it’s in a div or a span will always be #EEE.
There has been quite a bit of talk about adding inheritance the way you describe in CSS3, but that spec isn’t out yet, so right now we’re stuck repeating ourselves quite a bit.