Why Do 'Foo Bar' and 'Foo > Bar' Have the Same Specificity in CSS

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

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.

What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)

I think you got a slight misunderstanding what the first one means.

.element .symbol {}

Means that those CSS settings are applied to any HTML element with the class .symbol that is inside an element with the class .element.

<div class="element">
    <div class="symbol" />
</div>

In this example your first CSS entry would affect the <div> tag in the middle.

Your second example means that the first class requires two classes to be affected. Other than that it's equal to the first one.

<div class="element large">
    <div class="symbol" />
</div>

So if the HTML looks like this, the CSS values will be applied to the inner <div> tag as well.

If you want to set CSS tags that apply for multiple classes separately then you need to split them up using a comma. So it looks like this:

.element, .symbol {}

Edit: By request the link to the documentation of the CSS selectors.

what is foo? I have seen it in many CSS and Web designing examples

see 'foo' entry in jargon file.

http://www.catb.org/jargon/html/F/foo.html

esp. 2. [very common] Used very generally as a sample name for absolutely anything, esp. programs and files (esp. scratch files).

How does CSS specificity decide which styles to apply?

It's based on IDs, classes and tags. IDs have the highest specificity, then classes then tags, so:

.item a     == 0 1 1      0 (id) 1 (class=item) 1 (tag=a)
.special    == 0 1 0
#foo        == 1 0 0
#foo .bar a == 1 1 1
#foo #bar   == 2 0 0

whichever has the most wins :) If it's a tie, whichever one comes last in the document wins. Note that 1 0 0 beats 0 1000 1000

If you want .special to apply, make it more specific: .item a.special

Do CSS combinators add specificity to a CSS selector?

The problem in your snippet is that you have two selectors(div > p) in the 1st rule and in the 2nd rule only one selector(p), therefore the 1st rule is more specific, so the article is correct.

See the snippet below using the same 2 selectors, but the 1st having a combinator >, as they have the same specificity the latter will apply due to cascading.

div > p {

  color: red;

}

div p {

  color: green;

}

<div>

  <p>First Paragraph</p>

  <p>Second Paragraph</p>

</div>

CSS Specificity Issue - Why is this selector taking priority?

Both styles are being applied. You are correct that .footer-link:hover is more specific than a:hover, but what you are seeing is a combination of both style definitions. This is the cascading part of cascading style sheets.

Your a and a:hover styles are applied first, then the higher specificity .footer-link and .footer-link:hover styles are applied afterwards, and any of their explicitly defined properties (such as background) overwrite the previous definitions.

However, since you don't specify the link color in the .footer-link:hover style, it inherits the property from a:hover instead.

The specificity here is working exactly as it's supposed to, you're just a bit confused about how inheritance and specificity work!

Can I use two child selector .foo a.bar a , which is similar to .foo.bar ?

.menu>li>a {color: red;} .menu>li>a.active>a {color: blue;}

Your above CSS code is wrong, that's why it's not working.
You are having class="active" on <li> element, so you should use this css -

.menu>li>a {color: red;}
.menu>li.active>a {color: blue;}

Also .foo.bar css selector will work on elements having both the class, for example -

.foo.bar {

  color: dodgerblue;

}

<div class="foo bar">Multiple Class Element</div>