Questions about nested direct descendants in LESS

Question

So I was looking into some code recently, and trying to learn more about LESS, and there is one thing that I am not able to wrap my head around completely. I saw the use of something structured like:

.class{
    >*{
        /*some css*/
    }
}

NOTE: The >*{} is nested inside of the .class block

I think have an idea of what this is doing, but there are a couple things I don't understand.

What I think it's doing: I am assuming that it is taking all of the direct descendants of that class and styling them accordingly. so the actual(compiled) css might be something like .class > *{}

My questions:

1. Am I right in my assumption, or is this doing something completely different?

2. If that is correct, why does this statement not need the & in front of it like other concatenations?

I apologize if this is something that has come up before, I simply don't know what other way to ask google the same question.

Answer 1

It's actually as simple as:

Nested selector elements are always combined with whitespace. E.g. ^[1a]:

a {
   b {}
}

results in:

a b {}

Same way, ^[1b]: :

a {
   > b {}
}

results in:

a > b {}

etc.

---

& has to be used only if you need to suppress that whitespace, as in ^[2a]:

a {
    &:hover {}
}

for:

a:hover {}

Or if parent selector elements are not to be placed in front, ^[2b]:

a { 
   b & {}
}

c { 
   & & {}
}

d {
  & {}
}

e { 
   f ~ g:not(&) > & & + &&& {}
}

// etc.

resulting in:

b a {}
c c {}
d {}
f ~ g:not(e) > e e + eee {}

---

Combinators never affect anything and the only requirement is that a combinator must be followed by an identifier, e.g:

a { > b {} } // ok
a > { b {} } // error

Answer 2

1. Your assumption is correct.

2. The & can be omitted from nested selectors that start with a combinator like > or +, or start with a compound selector where the intended result is a descendant combinator, such as

   .a { .b {} }
   

   resulting in .a .b.