Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why do 'foo bar' and 'foo > bar' have the same specificity in CSS?

I'm curious why using > or other combinators does not affect the specificity of CSS selectors, i.e. why div span (matching a span somewhere inside a div) and div > span (matching a span which is the immediate child of a div) are considered equal regarding the specificity.

I do realize that the usage of combinators is completely irrelevant for the specificity but I wonder if there's a certain reason for it.

like image 698
ThiefMaster Avatar asked Nov 11 '11 16:11

ThiefMaster


People also ask

Which CSS rule has the most specificity?

Inline styles added to an element (e.g., style="font-weight: bold;" ) always overwrite any normal styles in author stylesheets, and therefore, can be thought of as having the highest specificity.

How does CSS determine specificity specificity?

Memorize how to calculate specificity! Start at 0, add 100 for each ID value, add 10 for each class value (or pseudo-class or attribute selector), add 1 for each element selector or pseudo-element. Note: Inline style gets a specificity value of 1000, and is always given the highest priority!

What is difference between .FOO and #foo in CSS?

The “.” selectors are not unique, same selectors can applicable on multiple elements, if the HTML elements holds the same class property like a list of elements can contains the same class. The “#” are unique.

Which CSS selector is weighted the highest in the CSS specificity algorithm?

CSS Selectors and Their “Weights” lowest weight : type and pseudo-element selectors. low weight : class, attribute, and pseudo-class selectors. medium weight : ID selectors. high weight : inline styling.


1 Answers

This has actually been brought up in the working group mailing list, way back when, in this thread.

It basically comes down to, yes, intuitively a selector with a combinator looks more specific, but an algorithm, extended form the current one, with this in mind becomes much more complicated than the "simple" triplets used now, which is pretty confusing for people as it is.

Finally,

While this could have been the case, this is one of the few things in CSS2
that have been interoperably implemented for years, and therefore won't
change in CSS2.1.

"If it ain't broke, don't fix it." seemed to be the final call.

like image 80
Andrew Avatar answered Sep 19 '22 20:09

Andrew