How to use CSS selectors Efficiently
ID’s is the most efficient Selector whereas Universal Selector is the least efficient. There are four kinds of key selectors. Each of them are rendered with different efficiencies.
- ID (Fastest to)
- Class
- Tag
- Universal (Slowest)
The browser reads the selector from right to left. It 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”, it is the element being selected. Now below is few examples generally we use in our Stylesheet.
#sidebar { } /* ID */
.side-nav{ } /* Class */
ul { } /* Tag */
* { } /* Universal */
body.home #container { } /* Descendent selectors class and ID*/
ul li a.current { } /* Descendent selectors-class *
ul li a { } /* Descendent selectors-Tag */
#content [title='home'] /* Universal */When we use the child selector it is not very efficient to use, as it takes a lot of time to interpret.
#sidebar > li { } /* Slower than it might seem */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 actually, the relatively slow li tag selector is run first.
could just find that ID quickly and then find the li children quickly. But actually, the relatively slow li tag selector is run first.Tag qualify technique should be avoid because ID’s are unique, they don’t need a tag name to go along with it. It makes the selector less efficient. And it is better to avoid with the classes too even though they are not unique. We can make use of it in exceptional cases like li.first but that’s pretty rare.
ul#custom-list { }Descendant selectors are the worst technique and most expensive. In other words it is the least efficient, for each element the CSS engine matches the key selector, the browser also have to traverse up the DOM tree, evaluating every ancestor element until it finds a match for the root element. The less specific the key, the greater the number of nodes that is to be evaluated.
html body ul li a { }Font-family cascades, so you may not need a selector to specify like specified in the 1st example. The 2nd one is as effective and far more efficient than the 1st one.
- #container li a { font-family: Georgia, Serif; }
- #container { font-family: Georgia, Serif; }
city, you must have seen traffic constables standing in junctions with a notepad and a pen. What they are actually doing is noting down the registration numbers of those vehicles that are found to be violating the traffic rules. You may be forgiven if you’ve been found guilty for once, but eventually you’ll be seeing the penalty letter landing in your post box. Remember that all the violations by a registered vehicle will be safely saved in a database.
website.