I still do some CSS for websites but just now I learned that browsers read CSS selectors from right to left.
One of the important things to understand about how browsers read your CSS selectors, is that they read them from right to left. That means that in the selector ul > li a the first thing interpreted is a. This first part is also referred to as the “key selector” in that ultimately, it is the element being selected.
— “Efficiently rendering CSS“
This was a big surprise to me because I was thinking of the entire page as a single entity. But the browser has a different problem: When it gets to an element it needs to find out how that specific element is to be rendered, and to do that in the fastest possible way, it finds out which CSS rules it does not need to consider. And this is best done right to left.
Advice: Use classes.