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.
Related
Is there any difference between those three CSS rules ?
* {
font-size: 24px
}
:root {
font-size: 24px
}
html {
font-size: 24px
}
Yes there is a difference. Below some examples where the result isn't the same
Using *
* {
font-size: 24px
}
p {
font-size:2em;
}
<div>
<p>some text <span>here</span></p>
</div>
Using html (or :root)
html {
font-size: 24px
}
p {
font-size:2em;
}
<div>
<p>some text <span>here</span></p>
</div>
Applying font-size to all the elements is different from applying the font-size to the html element and having all the elements inherit the value.
In the first example, span will have a font-size equal to 24px because it was selected by *. In the second example, span will inherit the computed value of p since no selector is targetting it.
between html and :root there is a specificity war where :root will be the winner:
html {
font-size: 999px;
}
:root {
font-size:24px;
}
<div>
<p>some text <span>here</span></p>
</div>
:root {
font-size:24px;
}
html {
font-size: 999px;
}
<div>
<p>some text <span>here</span></p>
</div>
All of them will affect your whole HTML. You can even use a forth option, that would be html * { }, that would work on all of your HTML.
Their meaning are:
The * means that will select all elements - as per CSS * Selector.
The :root CSS pseudo-class matches the root element of a tree representing the document. In HTML, :root represents the <html> element and is identical to the selector html, except that its specificity is higher.
You can get more example and information on this post from the Community: How to Apply global font to whole HTML document.
Hope this helps!
If we have something like this, with all of *, :root and html together as below
*{
background: green;
}
:root{
backgroud:yellow
}
html{
background:black
}
h1{
background:blue
}
</style>
</head>
<body>
<h1>This is a heading<span>Cow</span></h1>
</body>
The specificity is as below
:root(yellow) >html(black)>*(green)
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>
So have my main style sheet that sets all the styles for my site. But I have a div that opens as menu. I need it to have it's own style and I can't have it or it's decedents inherent any styles from the main style sheet. But after I reset the style I'm then styling the div like it's a whole new element. I found the all: initial; rest the elements. and #we_gallery_edit_window > * sort of works. But when I try to declare the new styles some of the new styles won't take because of precedence. here is my code so far:
h1
{
color: #000000;
background-color: #FFFFFF;
}
#my_div > * /*Clear all previous CSS for #mydiv only */
{
all: initial;
}
.my_div_child h1
{
color: #F0F0F0;
}
<h1>Hello</h1> //Should be black with background
<div id='my_div'>
<h1 class='my_div_child'>Good bye</h1> //Should be grey without background
</div>
<h1>Hello</h1> //Should be black with background
I need a selector that will override everything above it but has no precedence over anything below it. So remove the style set by h1 in the main div, then reset h1 of .my_div_child. it's not just the h1 element I'm having trouble with but that's the easiest example I can think of.
Okay, after seeing the updated post, I think I get the idea.
I think you may be simply using the wrong selectors. You may review CSS selectors if you're unsure.
For one thing, if you want to style an h1 with the class of my_div_child, the rule would be h1.my_div_child, or simply .my_div_child, if you don't have other, non-h1 elements with that class name. Using .my_div_child h1 will select h1 tags inside a parent container with the class of my_div_child, which is not what your HTML shows.
If you want to reset the styles of children of #my_div, you can use the all: initial selector with the wildcard like you did, but instead of using the direct child selector (>), just nest the wildcard regularly:
#my_div * {
all: initial;
}
If you use the direct child selector, only the first level of children in #my_div will be reset, but grandchildren of #my_div won't be, which is probably not what you want.
Those things cleared up, simply use the above statement to reset your styles and then start styling the contents of #my_div as needed, and it should work because various tags (e.g., h1) will be more specific than the wildcard. See code snippet below.
That said, you may find it easier to simply override certain styles that aren't what you want by using specificity than to reset everything in #my_div and start over. Odds are there are some styles the menu will share with the site overall. For example:
h1 {
font-style: italic;
}
#my_div h1 {
font-style: normal;
}
If these approaches don't work, and you're still having trouble with your styles not working, you'd have to post some more specific code so we can work out what the problem is.
Example reset:
html {
background-color: coral;
font-style: italic;
font-family: sans-serif;
}
h1 {
background-color: white;
}
#my_div * {
all: initial;
}
#my_div .my_div_child {
color: darkgray;
font-size: 4em;
/* note that font-style and font-family don't need rules b/c they have been reset by all: initial above */
}
<h1>Hello</h1> <!-- Should be black with background -->
<div id="my_div">
<h1 class="my_div_child">Good bye</h1> <!-- Should be grey without background -->
</div>
<h1>Hello</h1> <!-- Should be black with background -->
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>