It is nice not to write too much to get some pseudo elements or selectors working, but that's the extent of it.
Tying your CSS to the markup is a recipe for misery and pain. Over all these years, I've never seen it not turn out to be a nightmare.
There is bunch of CSS features and techniques that work only when you enforce certain parent-child relationships of the CSS rules.
Simplest example of it is 'position:absolute' that requires some parent node to have 'position: relative' to be useful. But there is more to that, both flexbox and grid require certain properties to applied to both parent and children nodes at the same time.
Nesting is one way to enforce those relationships and make sure that they are co-located in the stylesheet code.
Something like that is, in my view, good usage of the nesting:
.parent {
display: flex;
& > .child {
flex: 1 1 auto;
}
}
.child {
color: red
}
In your example, if .child had flex defined internally, then that becomes a bad time in my experience.
What helped was to start building utility classes which I can reuse them.
As the other guy said, nesting selectors has few good usages, should be used carefully.