1

When an element's property's given more than one specified value, the following determines which rule to apply: in each 'section', the rule that comes from the highest numbered 'source' wins. If a tie, go onto the next section.

cascading-order section:

In the cascading order, if any one has !important, it wins.

  1. user-agent stylesheet. (When it & rival(s) have !important;, it wins).
  2. user. (When it & rival(s) have !important;, it wins over 3).
  3. author

!important section:

If a rule has !important it wins.

specificity section 1:

If a rule's from inline it wins.

specificity section 2: (when multiple selectors, the rule with the highest-numbered selector wins).

  1. type selector( element) & pseudo-element.
  2. class, pseudo-class, attribute-selector.
  3. id selector.

specificity section 3:

The rule that has the highest number of the highest ranked selector wins.

source order section 1:

Between external & internal stylesheets, the stylesheet that appears lowest wins.

source order section 2:

The rule that appears lowest in the stylesheet wins.

tonitone120
  • 1,920
  • 3
  • 8
  • 25
  • @disinfor Not really. Would you be able to give this a quick read and see if it's correct? – tonitone120 Sep 12 '20 at 19:10
  • 2
    I think this is close, but misses some nuance. For one thing, your specificity section 1 is sort of incorrect. I don't think external vs internal really matters as much as order of rules. What does matter there is internal style (which overrides everything except !important). Here are some references on the [cascade](https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade) and [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) that may help you understand it a little better. – jennyfofenny Sep 12 '20 at 19:21
  • 1
    @jennyfofenny I was writing this exact thing when your comment popped up! Also, the accepted answer on the duplicate addresses load order. – disinfor Sep 12 '20 at 19:25
  • @jennyfofenny Thanks for improvement have given it an update. Would be interested to hear your thoughts now – tonitone120 Sep 12 '20 at 20:14
  • 1
    I think the point that's missing here, is that none of these `sections` operate in a bubble - they are all dependent even in the cascade. Remove the `cascading-order` stuff altogether - the reason I say this is that as a developer, you have no control over `user` defined styles. Also, browsers have base styles and rarely is anything in the `user-agent` stylesheet `!important` and will always defer to `author` stylesheets. That said, `!important` will ALWAYS override a style, unless there is another rule of the exact same or higher importance value with `!important` further down the cascade. – disinfor Sep 12 '20 at 20:48
  • 1
    Your `section three` is also dependent on order within the DOM. So, technically, those are interchangeable. – disinfor Sep 12 '20 at 20:50
  • @disinfor 1. I know a `author` rule will alway override a `user-agent` rule (apart from `!important`). What about `user` stylesheets? Do they automatically over-ride `author` stylesheets no matter the specificity (of `author` stylesheet)? Or do they only override if the specificity is the same? Or do they have no over-ride powers at all and are on an equal par e.g. specificity determines when it overrides `author`?). 2. What do you mean by `section three` is dependent on order within the DOM? How might these be interchangeable? – tonitone120 Sep 12 '20 at 21:24
  • 1
    1. `author` stylesheet will override a `user` stylesheet - unless importance is set. You can see that per the link that @jennyfofenny posted about cascade. 2. If you have internal styles, e.g. `` before an external sheet, the styles in the style tags will be overwritten by anything with the same or higher specificity in the external sheet and vise versa. That's how they are interchangeable. – disinfor Sep 12 '20 at 21:51
  • @disinfor Thanks. Would you say my post is quite accurate now? My aim is to create a succinct way to evaluate competing rules. – tonitone120 Sep 13 '20 at 04:14
  • 1
    It is getting better, but I don't think the specificity section 2 is good enough if you want to be able to evaluate directly. You may want something like this [specificity calculation](https://css-tricks.com/specifics-on-css-specificity/#calculating-css-specificity-value) section, since most selectors are complex. Additionally, I think specificity section 3 should be removed outright. You could replace with an addendum to section 2 that for rules that evaluate to the same specificity (both may apply their rules, but for the same rule, the last definition overrides). – jennyfofenny Sep 13 '20 at 17:57
  • @jennyfofenny 1. Thanks for pointing that out; I think I've added in specificity section 3 to reflect that. I don't understand your 2nd comment. The post does say that if there's a tie (in this case, same specificity) go onto the next section. Are you trying to say that the runner-up(s) would would have all its other properties applied that didn't contradict with the winning rule? If so, I could make that clearer at the top of the post that the only things competing are the part of the style that target the same property. – tonitone120 Sep 13 '20 at 21:58
  • @tonitone120 I just mean that internal vs external doesn't matter at all. It is only the order of how the rules are loaded, including the precedence of the cascade. A style tag in the head can be above or below externally loaded stylesheets and that's all that matters; internal vs external style has no bearing at all on specificity. I would even venture to say your statement about general order is incorrect - usually the external stylesheets are loaded and the embedded styles are used to override. But they could easily appear before the externally loaded stylesheet and thus be overridden. – jennyfofenny Sep 14 '20 at 13:31
  • @jennyfofenny external & internal stylesheet do matter but you wouldn't classify this as a matter of specificity, it's a matter of source-order. Is my paraphrasing of you right? – tonitone120 Sep 15 '20 at 18:06

0 Answers0