I know that inline has more specificity than external but does internal have more than inline? Or is it the other way around?
Internal:
<style>
p{
color: red;
}
</style>
Inline:
<p style="color:blue">
External:
p{
color:green;
}
No, internal does not take over inline. Inline styles are always the highest priority. From Mozilla Docs:
Inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
These "external stylesheets" also include style tags in the head or body. See for yourself:
p {
color: red;
}
<style>
p {
color: red;
}
</style>
<p style="color: blue">
Hello!
</p>
<style>
p {
color: red;
}
</style>
Whether it is before or after, the only thing that will override an inline style is !important, which you should shy away from using. Refer to the MDN link above.
Finally, be careful when you say,
I know that Inline has more specificity than external [...]
since specificity is a special CSS concept. Yes, inline styles will override external styles (when not using !important), but don't confuse specificity with precedence. CSS rules are ranked in two ways:
Specificity
and Order.
This includes order across separate files. If you put your style tag before your link tag, then the external styles will overwrite the internal ones (if they are of the same specificity).
Again, this doesn't apply much to internal styles, and this is mostly a semantics clarification for "specificity," but it doesn't hurt to point out.
Related
What is the level of CSS specificity received by inherited properties? I read through the W3 recommendation regarding CSS specificity and so I understand how to calculate the different specificities of css rules which are directly targeting the same element, but I see no mention there of the level of specificity given to inherited attributes.
In particular, the issue I'm encountering has to do with header elements, though I would be very interested to understand this in general.
For example, here's a snippet of HTML:
<h2>This should be black</h2>
<div class="all_red_text">
<h2>This should be red</h2>
</div>
Now if I include some CSS like this:
.all_red_text { color: red; }
I will get the result I expect. On the other hand, if I the css which I included was
h2 { color: black; }
.all_red_text { color: red; }
then all the text will be black. In the first case there is some default browser CSS which is able to be overridden by the inherited property, but then when the same property is manually specified in the second example it takes precedence over the inherited property.
Any declaration that matches element directly will get priority over the property that's inherited from the element's parent. Specificity has nothing to do with that.
CSS is applied to elements in this form:
Priority 1: inline styles
Priority 2: CSS ID styles
Priority 3: CSS class/pseudo-class styles
Priority 4: CSS element styles
Priority 5: Inherited styles
So, using your HTML structure & CSS:
h2 { color: black; }
.all_red_text { color: red; }
<h2>This should be black (and is black)</h2>
<div class="all_red_text">
(This text is indeed red.)
<h2>This should be red (actually, its parent is red - this text is black)</h2>
</div>
The .all_red_text CSS is telling the div.all_red_text element and everything inside it to have red text. The h2 CSS is telling the h2 elements directly to have black text. When the h2 is rendered, it sees "my parent element wants me to have red text, but I'm directly being told to have black text". The same idea applies to further up parents, including the HTML and browser defaults - this allows you to, for example, set the font-family on the html element and have it apply to everything on your (well formatted) web page, unless something specifically overrides it.
If you want the h2 inside div.all_ted_text to also have red text, you'd need to tell those h2 elements directly to have red text; something like this:
.all_red_text h2 { color: red; }
CSS-Tricks has a pretty nice guide on this, although they don't currently go too deep into inherited properties.
There is no such thing as specificity of inherited CSS properties. Selectors, not properties, have specificity.
In your example, both h2 elements match only one of the rules, h2 { color: black; }. Thus, the color of h2 is black (assuming there are no other style sheets that affect the rendering). Anything set on some other elements (including the parent of the second h2 element) does not affect this the least.
If the rule h2 { color: black; } is absent and there are no other rules affecting the situation, then there is no color set on either of the h2 elements. According to the definition of the color property, the value is then inherited from the parent.
Two or more selectors gets engaged into Specificity War, if and only if
they end up targetting the exact same element. However, If two selectors (targetting the same element) have equal specificity weight, then there are other factors like you said, inheritance or the styles getting over ridden in the css file.
I'm finding very random when I can or cannot override Bootstrap classe/ id with a custom .css
For example, to change default navbar-dark, Background and font-style overriding is acceptable.
But font colour and size cannot change unless I force a change applying "style" inside of element or as an "id" linked to an external css file.
What does not works:
<nav class="navbar navbar-dark"style="background: red; color:
yellow; font-family: cursive font-size: 50px;">
<a href="" class="navbar-brand" style="color: yellow; font-size:
50px;">PATTERN</a>
</nav
Applying style on element works, such as:
<nav class="navbar navbar-dark"style="background: red; font-family:
cursive;">
<a href="" class="navbar-brand" style="color: yellow; font-size:
50px;">PATTERN</a>
</nav
Being able only to use id inside of each element becomes a problem when I have a big navbar and I want to apply a class to all of them.
What can I do to customize or how can I learn about those limitations?
Thank you :)
Well it depends if the color style is set in Bootstrap on parent element and then it descends or it is set directly on child... And it is set on the child... so you need to set it directly on that child.
But use CSS, or LESS, SASS etc.. dont use inline classes, set it globaly for all children you want to target.
Like that:
.navbar-dark .navbar-brand {
color: yellow;
}
The problem you are facing is directly related to CSS Specifity. CSS specifity applies when there are two or more conflicting CSS rules that point to the same element.
The specifity of the CSS rules determines which one of the conflicting rules will aply to your html element. In general, more specific CSS rules go over less specific ones. This is, from more specific to less specific:
Inline styles: styles defined in the "stype" attribute, inside the html tag.
ID: a CSS rule that references an element by its id instead of a class (for example #navbar).
Classes, attributes and pseudo-classes: most common css rules. In example:
.blueBackgroundClass {
background: blue;
}
Elements and pseudo-elements: usually only used to make site-generic styles, such as:
p {
font-family: "Times New Roman", Times, serif;
}
a {
color: blue;
}
For more information about it I strongly recommend you to see the CSS Specifity documentation.
What is the level of CSS specificity received by inherited properties? I read through the W3 recommendation regarding CSS specificity and so I understand how to calculate the different specificities of css rules which are directly targeting the same element, but I see no mention there of the level of specificity given to inherited attributes.
In particular, the issue I'm encountering has to do with header elements, though I would be very interested to understand this in general.
For example, here's a snippet of HTML:
<h2>This should be black</h2>
<div class="all_red_text">
<h2>This should be red</h2>
</div>
Now if I include some CSS like this:
.all_red_text { color: red; }
I will get the result I expect. On the other hand, if I the css which I included was
h2 { color: black; }
.all_red_text { color: red; }
then all the text will be black. In the first case there is some default browser CSS which is able to be overridden by the inherited property, but then when the same property is manually specified in the second example it takes precedence over the inherited property.
Any declaration that matches element directly will get priority over the property that's inherited from the element's parent. Specificity has nothing to do with that.
CSS is applied to elements in this form:
Priority 1: inline styles
Priority 2: CSS ID styles
Priority 3: CSS class/pseudo-class styles
Priority 4: CSS element styles
Priority 5: Inherited styles
So, using your HTML structure & CSS:
h2 { color: black; }
.all_red_text { color: red; }
<h2>This should be black (and is black)</h2>
<div class="all_red_text">
(This text is indeed red.)
<h2>This should be red (actually, its parent is red - this text is black)</h2>
</div>
The .all_red_text CSS is telling the div.all_red_text element and everything inside it to have red text. The h2 CSS is telling the h2 elements directly to have black text. When the h2 is rendered, it sees "my parent element wants me to have red text, but I'm directly being told to have black text". The same idea applies to further up parents, including the HTML and browser defaults - this allows you to, for example, set the font-family on the html element and have it apply to everything on your (well formatted) web page, unless something specifically overrides it.
If you want the h2 inside div.all_ted_text to also have red text, you'd need to tell those h2 elements directly to have red text; something like this:
.all_red_text h2 { color: red; }
CSS-Tricks has a pretty nice guide on this, although they don't currently go too deep into inherited properties.
There is no such thing as specificity of inherited CSS properties. Selectors, not properties, have specificity.
In your example, both h2 elements match only one of the rules, h2 { color: black; }. Thus, the color of h2 is black (assuming there are no other style sheets that affect the rendering). Anything set on some other elements (including the parent of the second h2 element) does not affect this the least.
If the rule h2 { color: black; } is absent and there are no other rules affecting the situation, then there is no color set on either of the h2 elements. According to the definition of the color property, the value is then inherited from the parent.
Two or more selectors gets engaged into Specificity War, if and only if
they end up targetting the exact same element. However, If two selectors (targetting the same element) have equal specificity weight, then there are other factors like you said, inheritance or the styles getting over ridden in the css file.
I don't know what this technique is called, I've only seen it used. It's a way to repurpose the same selectors with CSS.
For example if I create
h1 {
font-size:18px;
color:#FFFFFF;
font-family:Arial, Helvetica;margin:0;
padding:0;
}
h2 {
font-size:18px; color:#000000;
font-family:Arial, Helvetica;
font-weight:normal;margin:0;
padding:0;
}
I can repurpose the h selectors with something like
.whatever h1 {
color: #000;
font: 2.0em arial, sans-serif;
background-color: #fff3ea;
margin: 50px 0px 0px 50px;
}
.whatever h2 {
color: #000;
font: 1.7em bold arial, sans-serif;
background-color: #fff3ea;
margin: 25px 0px 25px 75px;
}
If h1 and h2 appear inside of a div called whatever, then they will assume those properties. You can do this with ID tags and class tags but I can't for the life of me remember how this is done.
Any thoughts?
This is called specificity.
It's a key feature of CSS which means properties in the more specific selector (.whatever h1) will override properties in less specific ones (h1). It allows you to set general styles for most of the elements on the page (e.g. all h1 elements), and then change the properties of a small subset of those elements using a more specific selector that identifies, for example, only the h1 elements inside another element whose class is whatever:
HTML
<h1>I'm green with envy</h1>
<h1>And so am I</h1>
<div class="whatever">
<h1>Because I'm rather special</h1>
</div>
CSS
h1{
color: green;
}
.whatever h1{
color: blue;
}
RESULT
The CSS selector .whatever h1 means "any h1 element inside another element with a class of whatever". You could also give the h1 element its own class to achieve the same effect; you just write the CSS slightly differently to reflect the fact that the h1 element you're targeting now has its own class:
HTML
<h1 class="whatever">I'm special</h1>
CSS
h1.whatever{
color: blue;
}
Always try to give your classes and IDs meaningful names that refer to the element's role within the page, rather than its colour or other attributes. i.e. It is much better to use ".introduction" instead of ".bigredtext" or ".whatever". That way, if you change the colour of your intro text to bright blue, you don't have to rename the class in your CSS and HTML, and everything in your HTML will read better too. (This is what people are talking about when they mention "semantics" and "semantic naming conventions".)
How specificity is determined (simple rules to remember)
User agents (web browsers) use a formula to calculate how specific each selector is and which should take precedence over the other. In very simple terms, from less specific to more specific:
Selectors with only the name of the element (e.g. h1) are the least specific of all
Selectors with a .class are more specific than selectors with no class
Selectors with an #id are more specific than selectors with a .class
Selectors lower down in a stylesheet take precedence over earlier identical selectors
Those are the four main rules worth learning about specificity, and they will cover most simple use cases. These two additional rules aren't related to specificity, but they're worth knowing too:
Inline styles such as <h1 style="color: blue"> will take precedence over external rules declared separately in external stylesheets or inside <style> tags. You probably shouldn't use inline styles, but it's worth knowing this just in case you come across them.
Properties within a selector that use the !important flag "trump" everything and can't be overruled. Likewise, you probably shouldn't choose to use the !important flag, but there are times when you may be forced to.
How specificity is really determined (how to calculate it precisely)
Of course, it gets a little more complicated than the above (but not by much) when you start chaining classes, IDs, and elements together, which is why it can be helpful to learn how to calculate specificity precisely rather than working on intuition alone, as it will save you a lot of time when your stylesheets get bigger and more complicated.
If you'd like to learn more, Smashing Magazine has a piece titled "CSS Specificity and Inheritance" that's worth a look. They reference Andy Clarke's famous Star Wars Chart, which might be an easier way to visualise specificity if you're familiar with Star Wars, but it will probably just make things even more confusing if you're not! (Click the image below to read more on Andy's site.)
You faced overriding the selectors.
example:
<div class="one">
<div id="two">
<h1> This is H1 text </h1>
</div>
</div>
so you have set H1 to FFF - white color by:
h1 {
color:#fff;
}
now we do first override ( using ID ):
div#two h1 {
color:#888;
}
and the third, notice you don't have to put current element, you can set it for each element with given class:
.one div#two h1 {
color:#000;
}
so in the end we have black text color.
The raw ones are to set "global" styling. The nested ones are to give exac styles to given elements.
Also you can use chaining class/id selectors for <div id="one" class="two three four"> you can select it using div#one.two.three.four - without spaces
Is it possible to effect styles for descendants of a custom class only? I'd like to override some jQuery UI styles for the descendants of my DOM element only.
Something like
.myStuff .ui-button {font-size: 0.7em !important;}
<div class="myStuff">
<input type="button"></input> !-- jQuery UI class .ui-button
</div>
<input type="button"></input> !-- .ui-button not effected by my .ui-button style
I've tried the child selector (>) but it stops at the first level :(. I actually thought the double class syntax with the space was the correct one...but it doesn't work either.
These are the exact selectors I'm trying to override from jQuery UI:
.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
.ui-widget-content a { color: #222222/*{fcContent}*/; }
.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; }
.ui-widget-header a { color: #222222/*{fcHeader}*/; }
I really just want to change the font size...I'll try to calculate it per your example, but I didn't have any luck yesterday :(.
You CSS looks alright, that should work, however I believe that you might be a victim of the CSS specificity. If you open up the jQuery UI stylesheet files, I believe you will see that the selector of the CSS rule you want to override is more specific than your CSS rule, thus has the upper hand and will be used in favor of your rule.
To be able to override it, you will have to add a CSS-rule of your own that has a greater specificity than the rule provided by jQuery UI.
Update
It is hard to give an exact example of how to override the rule in this case, since we don't know how the selector looks for the rule that we want to override. However, the general idea is that you will have to calculate the specificity of the rule that you want to override (refer to the Smashing Mag article linked above, on how to do this) and then make sure that your rules specificity is greater than the specificity of the rule you want to override. There are several ways to accomplish this, add extra classes or IDs to your selector for instance.
I guess the easiest way in your case would be to open up the jQuery UI stylesheet, find the rule that you want to override, copy the exact selector that they are using, use that selector and prepend it with your .myStuff class, and you should have a rule that is more specific than the one provided by jQuery UI.
Also, I would NOT recommend using !important to solve this problem. This is my personal opinion, but if you start using !important, you might be in for a world of pain later on when you try to modify your CSS. Throubleshooting faulty layouts can be really tough if you have rules specified with !important that break the normal flow of your CSS.
Yes, your example will work.
.myStuff .ui-button {some custom style}
However, check the dom with Chrome's developer tools (or FF or IE's) to verify that you are using the correct selectors. jQuery UI can add a great deal of dom elements for various widgets.