True for this isolated example, but careful with this practice because that requires `<a />` to be the immediate descendant of `.link-list`, where className is

True for this isolated example, but careful with this practice because that requires `<a />` to be the immediate descendant of `.link-list`, where className is more flexible. Consider a simple HTML change like wrapping links in a list item, or occasionally using a <button /> to handle click events, it would break the styles if you used child selectors: <ul class="link-list> <li><a href="#" /></li> </ul> ^ even with this tiny change, your styles are gone. Would have to change it to: .link-list > li > a {} And would have to repeat that for anything else you'd want to support later: .link-list > li > a, .link-list > li > button {} etc. Where with a normal className it would just work in all those cases without having to touch CSS again: <div class="link-list> <a class="transition-link" href="#" /> <span><a class="transition-link" href="#" /></span> <button class="transition-link" /> <ul class="flyout-menu"> <li> <ul class="sub-menu"> <li><a class="transition-link" href="#" /></li> </ul> </li> </ul> </div> All those would be styled correctly without having to explicitly list descendant structures in CSS. So it's more flexible just using className and I would only use > for specific situations.