Nesting selectors (&) required to target nested html elements

Question

I'm really confused if we should or should not use the & nesting selector in the following situation

.my-class {
  & > a {
    color: yellow;
  }
}

VS

.my-class {
  > a {
    color: yellow;
  }
}

According to Kevin Powell the nesting selector is required when we target elements: https://www.youtube.com/watch?v=ljDIcBp-9sQ

But the 2nd example also works just fine, plus it makes much more sense because it's cleaner are we get used to it from SASS

Answer 1

The & selector in CSS nesting explicitly refers to the parent selector, ensuring clarity, especially in complex styles:

.my-class {
    & > a {
        color: yellow;
    }
}

This compiles to .my-class > a.

Omitting & also works because the CSS Nesting Module allows direct child selectors (only for simple syntax, not for complex):

.my-class {
    > a {
        color: yellow;
    }
}

This also compiles to .my-class > a.

Both are valid. Use & for explicitness in complex contexts (e.g., modifiers or pseudo-classes). Omit it for cleaner, simpler direct child selectors.