As we all know that most of the browsers read our css selectors from right to left.
For example:
ul > li > a { color:#ff0000; }
Browser will first interpret anchor (a) tag and then will filter it in list (li) tag and later in unsorted list (ul) tag to apply color to (a) tag.
There are four kinds of key selectors: ID, class, tag, and universal.
ID (Ex: #main-title) >> Most Efficient
Class (Ex: .major) >> Second Most
Tag (Ex: a) >> Third
Universal (Ex: *) >> Very Inefficient
In the example below, when we combine this right-to-left idea, and the key selector idea, we can see that this selector isn’t very efficient:
#main-list > li { } /* is actually slower than it might seem */
Usually, since ID’s are so efficient, we would think the browser could just find that ID quickly and then find the li children quickly. But in reality, the relatively slow li tag runs first in this case.
Keep visiting.. 