Properties of CSS: Inline CSS has the highest priority, then comes Internal/Embedded followed by External CSS which has the least priority.
Specificity Hierarchy :Every element selector has a position in the Hierarchy. Inline style: Inline style has highest priority. Identifiers(ID): ID have the second highest priority. Classes, pseudo-classes and attributes: Classes, pseudo-classes and attributes are come next.
There are several rules ( applied in this order ) :
!important
always takes precedence.In your case its rule 3 that applies.
Specificity for single selectors from highest to lowest:
#main
selects <div id="main">
).myclass
), attribute selectors (ex.: [href=^https:]
) and pseudo-classes (ex.: :hover
)div
) and pseudo-elements (ex.: ::before
)To compare the specificity of two combined selectors, compare the number of occurences of single selectors of each of the specificity groups above.
Example: compare #nav ul li a:hover
to #nav ul li.active a::after
#nav
):hover
and .active
)ul li a
) for the first and 4 for the second (ul li a ::after
), thus the second combined selector is more specific.A good article about css selector specificity.
Here's a compilation of CSS styling order in a diagram, on which CSS rules has higher priority and take precedence over the rest:
Disclaimer: My team and I worked this piece out together with a blog post (https://vecta.io/blog/definitive-guide-to-css-styling-order) which I think will come in handy to all front-end developers.
What we are looking at here is called specificity as stated by Mozilla:
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.
Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.
I like the 0-0-0 explanation at https://specifishity.com:
Quite descriptive the picture of the !important
directive! But sometimes it's the only way to override the inline style
attribute. So it's a best practice trying to avoid both.
First of all, based on your @extend
directive, it seems you're not using pure CSS, but a preprocessor such as SASS os Stylus.
Now, when we talk about "order of precedence" in CSS, there is a general rule involved: whatever rules set after other rules (in a top-down fashion) are applied. In your case, just by specifying .smallbox
after .smallbox-paysummary
you would be able to change the precedence of your rules.
However, if you wanna go a bit further, I suggest this reading: CSS cascade W3C specification. You will find that the precedence of a rule is based on:
The order in which the classes appear in the html element does not matter, what counts is the order in which the blocks appear in the style sheet.
In your case .smallbox-paysummary
is defined after .smallbox
hence the 10px precedence.
AS is state in W3: W3 Cascade CSS
the orden that different style sheet are applied is the following (quote from W3 cascading section):
user agent declarations
user normal declarations
author normal declarations
author important declarations
More information about this in the referred W3 document
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With