I have the following formats:
td:nth-child(6) { /* Saturday */
color: #ff7f7f;
}
td:nth-child(7) { /* Sunday */
color: #ff0000;
}
and later
.prevmonth, .nextmonth {
color: gray;
}
where prevmonth and nextmonth are classes in <td>-tags.
But the days from last month or next month are not shown in gray when they are a Saturday or Sunday.
Why the later format does not override the earlier format?
I helped myself by extending the earlier format with ...:not(.prevmonth, .nextmonth). That works fine.
CSS not only uses the latest selector for styling, it also uses the rule of specificity. If your selector is more specific (targeting an id, for example), it will override less specific selectors.
When the selectors have the same specificity, then the last one "wins".
This is used when working with CSS frameworks quite often. They give you a default style for a selector and you can copy the selector and override that style in a file which is added after the frameworks' files.
But of course it makes sense that styling an ID should have preference, since you give only exactly that one HTML element the ID, so the styling must be exclusive to that element as well.
You might have default stylings for table, but it makes sense table.sortable for example is a more specific styling for a table. It inherits the table styling and applies more or different styles when the table has class sortable as well.
All browsers implement CSS specificity.
Links:
See CSS Specificity on MDN
Cheat-sheet: Specifishity
So the answer.. or more of a task:
In your example, classes are more specific than pseudo-elements.
You will have to change selectors so they override themselves according to specificity. This takes a little time to set up, but at least you don't spam !important everywhere.
To quote the MDN:
Selector Types
The following list of selector types increases by specificity:
Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
ID selectors (e.g., #example).
Universal selector (*), combinators (+, >, ~, ' ', ||) and negation pseudo-class (:not()) have no effect on specificity. (The selectors declared inside :not() do, however.)
For more information, visit: "Specificity" in "Cascade and inheritance", you can also visit: https://specifishity.com
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.
Related
First time here asking something myself! Here's the thing.
I'm trying to use my own CSS classes for colors. Several of them don't work.
Here's an example:
<button type="button" class="btn btn-ladevi_blue" data-toggle="modal" data-target="#loginModalCenter">
Launch demo modal
</button>
Here the CSS:
.btn-ladevi_orange{
color: #FFFFFF;
background-color: #FFA700;
border-color: #FFA700;}
.btn-ladevi_blue{
color: #FFFFFF;
background-color: #00496B;
border-color: #00496B;}
Whenever I add something like "btn" before my custom class it gets ignored. When I "inspect" the element and go to check its attributes I can see that they are overridden. But if I change my custom class to something predefined like "primary" it obviously works and when inspected they aren't overridden and are working properly.
I checked this site:
https://codepen.io/ondrejsvestka/pen/NjxgVR
That's more or less what a want to achieve.
For now I'm going to bypass the problem by adding the attributes as styles within my HTML code (what I was doing with the others, but they are kind of growing in numbers, LOL!). But I'd like to know how to make this custom classes work with the predefined ones.
Thanks in advance!
This sounds like a CSS specificity thing, where the bootstrap .btn class is taking precedence because its selector is more specific.
From MDN's Cascade and Inheritance (emphasis added):
The amount of specificity a selector has is measured using four different values (or components), which can be thought of as thousands, hundreds, tens and ones — four single digits in four columns:
Thousands: Score one in this column if the declaration is inside a style attribute, aka inline styles. Such declarations don't have selectors, so their specificity is always simply 1000.
Hundreds: Score one in this column for each ID selector contained inside the overall selector.
Tens: Score one in this column for each class selector, attribute selector, or pseudo-class contained inside the overall selector.
Ones: Score one in this column for each element selector or pseudo-element contained inside the overall selector.
button.btn { /* class name (10) + element (01) = 0011 */
color: blue;
}
.my-btn { /* class name = 0010 */
color: red; /* overridden by button.btn because it's more specific than a single classname; 0011 > 0010 */
}
In the example above the button.btn selector has a specificity score of 11: the button tag name is 01, and the .btn class name is 10 for a total of 11.
The .my-btn selector has a score of 10 (single class name) so it loses to the previous selector.
The solution is to make your selector more specific. One quick hack that works in many situations is to simply repeat your selector in the CSS, which increases its specificty:
.my-btn.my-btn {
color: red; /* more specific than the single classname selector below */
}
.my-btn {
color: blue; /* overridden by more specific selector above */
}
Repeating the same class name, as in .my-btn.my-btn, doesn't change which elements the selector finds, but it increases the specificity score from 0010 to 0020 (class name (10) + class name (10)), so it wins over the single class name selector that follows, even though the latter appears later in the stylesheet.
You could, as others have suggested, just tack !important on to everything, but that can cause problems down the road when you want to further modify an element's style. You end up fighting to override !important, which is more complicated and confusing than simply observing specificity rules.
There are numerous questions about the order of loading CSS files and overriding classes, but after reading them I still have something I can't figure out.
There are two CSS files:
<link rel="stylesheet" href="standard.css" type="text/css">
<link rel="stylesheet" href="override.css" type="text/css">
loaded in this order (I checked that).
The HTML looks like this:
<div class="div_D1 ov_D1">
<div class="div_D2 ov_D2">
<div class="div_D3 ov_D3">
blablah
</div>
</div>
</div>
Standard.css contains:
.div_D1{
background: white;
}
.div_D2{
height: 10px;
}
.div_D1 .div_D3{
padding-left: 20px;
}
Override.css contains:
.ov_D1{
background: red;
}
.ov_D2{
height: 50px;
}
.ov_D3{
padding-left: 0px;
}
.ov_D1 and .ov_D2 are applied correctly: the background of .div_D1 is red, the height of .div_D2 is 50px.
.ov_D3 on the other hand does not behave as I expected. If I look at the order the rules are applied, the browser first applies .ov_D3, and then .div_D1 .div_D3, leaving me with an unwanted padding of 20px.
If however I change the class selector in Override.css to
.div_D1 .ov_D3 it does remove the padding.
Also changing the css to
.ov_D3{
padding-left: 0px; !important
}
does the trick. So there are solutions, I only can't understand why with a single selector the order of loading is respected, and with multiple selectors it is not.
This is called specificity of a Selectors. From the book Beginning CSS: Cascading Style Sheets for Web Design, Third Edition by Ian Pouncey and Richard York:
In addition to style sheet precedence, an order of precedence exists for the selectors contained in each style sheet.
This precedence is determined by how specific the selector is.
For example, an ID selector is the most specific,
and the universal selector is the most general. Between these, the
specificity of a selector is calculated using the following formula:
Count 1 if the styles are applied from the (X)HTML style attribute, and 0 otherwise; this becomes variable a.
Count the number of ID attributes in the selector; the sum is variable b.
Count the number of attributes, pseudo-classes, and class names in a selector; the sum is variable c.
Count the number of element names in the selector; this is variable d.
Ignore pseudo-elements.
Now take the four values and put them together in groups of four.
For Example:
Selector : div.someclass.someother
Selector Type : Element Name + Class Name + Class Name
specificity:
0,0,2,1, (a = 0, b = 0,
c = 2, d = 1)
In CSS, there are rules for specificity (quoted from MDN):
The following list of selectors is by increasing specificity:
Universal selectors
Type selectors
Class selectors
Attributes selectors
Pseudo-classes
ID selectors
Inline style
Since you have added specificity to your Selector you weren't able to override by normal CSS class selector.
So your Code
.div_D1 .div_D3is more specific than.div_D3and less specific than.div_D3.ov_D3.
JS Fiddle
As per MDN CSS selectors have rules called 'Specificity' which determine their order of precedence. The more specific a rule is, the greater it's priority regardless of position within a/some stylesheet(s).
A rule such as .class-1 .class-3 has a specificity (it's more specific) higher than .class-3 and takes precedence, as such the less-specific rule cannot override it without the use of !important which negates all other specificity rules. Using the higher specificity rule only takes place with conflicting styles, however.
So, you have set the rule:
.div_D1 .div_D3 { }
The above rule is more specific than:
.ov_D3 { }
Even though they target the same element the rule with the higher specificity takes precedence. You can fix this in your JS Fiddle by prepending the appropriate class structure as defined above.
So, .ov_D3 becomes either:
.div_D1 .ov_D3
or
.ov_D1 .ov_D3
Example here: JS Fiddle
If two classes in CSS have the same derived class how does CSS resolve the proper class?
For example:
.ClassA.Left {}
.ClassB.Left {}
.Left {}
Since the class 'Left' can be applied to any object how can I be assured it is the one I want?
What priority is used to bind 'Left'?
Anything with .Left as a class will get the styles applied in .Left, unless it also has ClassA (class="Left ClassA") then it will get the styles from .Left and .ClassA.Left, with ClassA.Left taking priority since it has higher specificity. Same rules apply to class="Left ClassB".
See here about specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Specificity
The concept
Specificity is the means by which a browser decides which property
values are the most relevant to an element and gets to be applied.
Specificity is only based on the matching rules which are composed of
selectors of different sorts.
How is it calculated?
The specificity is calculated on the concatenation of the count of
each selectors type. It is not a weight that is applied to the
corresponding matching expression.
In case of specificity equality, the latest declaration found in the
CSS is applied to the element.
Note: Proximity of elements in the document tree has no effect on the
specificity.
Crescent order of specificity
The following list of selectors is by increasing specificity:
Universal selectors
Type selectors
Class selectors
Attributes selectors
Pseudo-classes
ID selectors
Inline style
The !important exception
When an !important rule is used on a style declaration, this
declaration overrides any other declaration made in the CSS, wherever
it is in the declaration list. Although, !important has nothing to do
with specificity.
The :not exception
The negation pseudo-class :not is not considered as a pseudo-class in
the specificity calculation. Although, selectors placed into the
negation pseudo-class count as normal selectors.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Equally, if the element had all three classes (ClassA, ClassB and Left) the the order in which the classes are listed in your CSS sheet matters.
.ClassA.Left would be beaten by .ClassB.Left (for common properties) as .ClassB.Left was lower in the cascade.
Single class selectors are beaten by multiple class selectors, thus .ClassA.Left beats .ClassA
Source order of the classes in the HTML is not a factor.
Codepen Specificity Example
I have a jsbin with a table of inputs, using bootstrap. What confuses me is that the style with
input.someClass {
background-color: blue;
}
is applied, as expected, but
.anotherClass {
background-color: green;
}
is not applied to my input elements. What is the reason for this? For reference, check out http://jsbin.com/enaris/3/edit
What is the reason for this?
It's simply a matter of specificity - the first selector has a type selector attached to the class name whereas the second selector only has a single class. The second selector is therefore more specific and takes precedence.
This is migrated from another answer of mine, it may help:
You can think of specificity as four numbers, starting with (0,0,0,0):
!important rules always take precedence, only another !important rule
can override a previous one (its an accessibility feature of CSS,
designed to override the UA stylesheet)
The universal selector (*) has a specificity of 0
Combinators like + and ~ also have no specificity
Inline styles have the highest specificity (other than !important)
and count as the first number (1,0,0,0)
ID's (#test) count as the second number in the above set (0,1,0,0)
Classes, pseudo-classes and attribute selectors are the third number
(0,0,1,0)
Type selectors and psuedo-elements (e.g. - <p> & ::after) take place of the
fourth number, and are the least specific
Remember that if two rules have the same specificity and specify the
same property the latter in the stylesheet will win
Based on the above, the first selector has a specifictiy of (0,0,1,1) while the second only has (0,0,1,0)
CSS rules are applied from least specific to most specific.
You have:
Least Specific More Specific Most specific
.anotherClass input[type=...] (bootstrap) input.someClass
So, in your example b-cell is more specific than bootstrap styles and a-cell is less.
You can force a-cell to take precedence with !important (but use !important with caution, as it might become a debugging hell):
.a-cell {
background-color: green !important;
According to the CSS docs:
http://www.w3.org/TR/CSS21/cascade.html#specificity
Specificity is defined by (amongst other things) the number of attributes and pseudo-classes in the selector.
So, my question is, is it possible to increase specificity by repeating the same classname over and over again?
For instance:
would
.qtxt.qtxt.qtxt.qtxt.qtxt
{
}
have a higher specificity than
.qtxt.lalgn
{
}
or
.lalgn .qtxt//(space added to create child selector)
{
}
?
Yes, it is possible and intentionally so. While this is not mentioned in the CSS2 spec, it is explicitly mentioned in the Selectors 3 spec:
Note: Repeated occurrances [sic] of the same simple selector are allowed and do increase specificity.
Therefore browsers must increase the specificity when encountering repeated simple selectors, as long as the selector is valid and applicable. This not only applies to repeated classes, but also applies to repeated IDs, attributes and pseudo-classes.
Given your code, .qtxt.qtxt.qtxt.qtxt.qtxt will have the highest specificity. The other two selectors are equally specific; combinators have no bearing in specificity calculations at all:
/* 5 classes -> specificity = 0-5-0 */
.qtxt.qtxt.qtxt.qtxt.qtxt
/* 2 classes -> specificity = 0-2-0 */
.qtxt.lalgn
/* 2 classes -> specificity = 0-2-0 */
.lalgn .qtxt
Also, the space in your last selector is the descendant combinator; the child combinator is >.
.qtxt.qtxt.qtxt would have the highest specificity...
http://jsfiddle.net/nXBTp/1/
However, this is only the case if you repeat the class name more times that any other selector, for example:
http://jsfiddle.net/nXBTp/2/
You shouldn't need to hack specificity like this... if you need to force a value, use !important.