Oddbean

▲ ▼

 @957492b3 The Sass documentation makes this clearer because it shows examples (and Sass invented this syntax).

div {
  .foo {
  }
}

Becomes `div .foo` (note the space between).

div {
  &.foo {
  }
}

Becomes `div.foo` (no space between).

https://sass-lang.com/documentation/style-rules/parent-selector/

▲ ▼

 @90431d67 Thank you, that's very helpful. But this makes me realize my issue isn't with & but the fact that div .foo {...} is different from div.foo {...} 

That's even MORE obscure! 

BTW, I want to stress that I'm NOT a professional CSS author. Just someone that is trying to not drown when reading it.

▲ ▼

 @957492b3 I’m learning, too, and I only recently (last week) had to re-learn how this works, which is why it’s fresh on my mind. 🙂

▲ ▼

 @90431d67 So if you don't mind, is it easy to explain the difference between "div .foo" and "div.foo"?

▲ ▼

 @957492b3 Probably not as easy, but `div .foo` matches markup like this:

<div><span class="foo"></span></div>

That span tag could be any tag because `.foo` is not prefixed with a specific tag name.

While `div.foo` matches this:

<div class="foo"></div>

BTW, `div.foo.bar` matches:

<div class="foo bar"></div>

But not divs with only foo.

▲ ▼

 @90431d67 I must thank you yet again. But alas, CSS proves yet again that it eschews clear syntax for compactness.

The UX designer in me would say that div.foo is clear and so is div > .foo 

However allowing a space is needlessly compact, creates ambiguity, and hurts readability. (he says VERY naively)

▲ ▼

 @957492b3 I don’t think you’re wrong.