Skip to main content

Return to Answer

deleted 4 characters in body
Source Link
Tim Stone
Tim Stone
  • 19.2k
  • 6
  • 58
  • 66

To me, and I base this entirely on opinion, it's the expected "natural" behaviour.

Consider this:

You know how CSS specificity is calculated, and from that formula we know that #outer span is more specific than #outer, which is necessary for CSS on the whole to work correctly, and it makes sense. #outer span is also more specific than #inner, which is also logical within the domain of the stylesheet (#inner is only a classan ID, and #outer span is a classan ID plus an element, so in order to rank them if we are just looking at the stylesheet, the more qualified one must be more specific).

What's happening here is that you're applying the context of the HTML markup, and saying "Well, that doesn't make sense." To make things work the way that you're expecting, the browser would have to consier the following:

  • This <span id="inner"> is inside <div id="outer">
  • The stylesheet rules for #outer span and #inner apply
  • The rule #outer span is more specific than #inner
  • But wait! <span id="inner"> is inside <div id="outer">, so ignore the calculations based on the stylesheet and claim that #inner is more specific

That last step makes the determination process entirely based on the structure of the HTML, which makes it impossible to define the specificity in terms of the CSS alone. I personally believe that this would make the entire process more convoluted and hard to define, but you may disagree.

To me, and I base this entirely on opinion, it's the expected "natural" behaviour.

Consider this:

You know how CSS specificity is calculated, and from that formula we know that #outer span is more specific than #outer, which is necessary for CSS on the whole to work correctly, and it makes sense. #outer span is also more specific than #inner, which is also logical within the domain of the stylesheet (#inner is only a class, and #outer span is a class plus an element, so in order to rank them if we are just looking at the stylesheet, the more qualified one must be more specific).

What's happening here is that you're applying the context of the HTML markup, and saying "Well, that doesn't make sense." To make things work the way that you're expecting, the browser would have to consier the following:

  • This <span id="inner"> is inside <div id="outer">
  • The stylesheet rules for #outer span and #inner apply
  • The rule #outer span is more specific than #inner
  • But wait! <span id="inner"> is inside <div id="outer">, so ignore the calculations based on the stylesheet and claim that #inner is more specific

That last step makes the determination process entirely based on the structure of the HTML, which makes it impossible to define the specificity in terms of the CSS alone. I personally believe that this would make the entire process more convoluted and hard to define, but you may disagree.

To me, and I base this entirely on opinion, it's the expected "natural" behaviour.

Consider this:

You know how CSS specificity is calculated, and from that formula we know that #outer span is more specific than #outer, which is necessary for CSS on the whole to work correctly, and it makes sense. #outer span is also more specific than #inner, which is also logical within the domain of the stylesheet (#inner is only an ID, and #outer span is an ID plus an element, so in order to rank them if we are just looking at the stylesheet, the more qualified one must be more specific).

What's happening here is that you're applying the context of the HTML markup, and saying "Well, that doesn't make sense." To make things work the way that you're expecting, the browser would have to consier the following:

  • This <span id="inner"> is inside <div id="outer">
  • The stylesheet rules for #outer span and #inner apply
  • The rule #outer span is more specific than #inner
  • But wait! <span id="inner"> is inside <div id="outer">, so ignore the calculations based on the stylesheet and claim that #inner is more specific

That last step makes the determination process entirely based on the structure of the HTML, which makes it impossible to define the specificity in terms of the CSS alone. I personally believe that this would make the entire process more convoluted and hard to define, but you may disagree.

Source Link
Tim Stone
Tim Stone
  • 19.2k
  • 6
  • 58
  • 66

To me, and I base this entirely on opinion, it's the expected "natural" behaviour.

Consider this:

You know how CSS specificity is calculated, and from that formula we know that #outer span is more specific than #outer, which is necessary for CSS on the whole to work correctly, and it makes sense. #outer span is also more specific than #inner, which is also logical within the domain of the stylesheet (#inner is only a class, and #outer span is a class plus an element, so in order to rank them if we are just looking at the stylesheet, the more qualified one must be more specific).

What's happening here is that you're applying the context of the HTML markup, and saying "Well, that doesn't make sense." To make things work the way that you're expecting, the browser would have to consier the following:

  • This <span id="inner"> is inside <div id="outer">
  • The stylesheet rules for #outer span and #inner apply
  • The rule #outer span is more specific than #inner
  • But wait! <span id="inner"> is inside <div id="outer">, so ignore the calculations based on the stylesheet and claim that #inner is more specific

That last step makes the determination process entirely based on the structure of the HTML, which makes it impossible to define the specificity in terms of the CSS alone. I personally believe that this would make the entire process more convoluted and hard to define, but you may disagree.