top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

How a browser determines what elements match a CSS selector.

+2 votes
How a browser determines what elements match a CSS selector.
posted Dec 31, 2014 by Vrije Mani Upadhyay

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

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[title=”home”] the first thing thing interpreted is a[title=”home”]. This first part is also referred to as the “key selector” in that ultimately, it is the element being selected.

#main-nav > li { } /* Slower than it might seem */

Even though that feels weirdly counter-intuitive… 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 selector is run first.

If the browser can determine the element you are looking for using just one selector and you’ve used more, you have inefficient code on your hands.

So you have to be very careful on how you are choosing your selector. Give unique IDs to fetch the single element Or give class name properly to identify group of elements based on your requirement.

answer Jan 14, 2015 by Rahul Singh
Similar Questions
+1 vote

I tried the following code.But its not working.

html {scrollbar-face-color:#D6D7D6 ;
scrollbar-shadow-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;

scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color:  #000000;}
+3 votes

Facing some weird issue, whenever I open my website in the crome it is picking the old CSS file while in Firefox it is picking the latest. How can I force the browser to pick the latest CSS?