CSS Selector – Some Basics

CSS Selectors are nice, fancy, awesome… blablabla….Yep, I know that feeling. But you know there is no perfect world; hence, power usually comes along with cost. That’s why we have to dig into the basics of CSS selectors to ensure that we don’t misuse it at the expense of the rendering performance of browsers.

 1. Right to Left

Browsers parse CSS selectors from right to left. For example, for CSS selector .footer h3 {…}, the browser starts from the rightmost tag selector h3, finding out all the h3 elements. And then the browser traverses up the DOM tree, evaluating every ancestor element to see if it’s of class footer until it reaches the root element. Bearing the rule ‘Right to Left’ in mind, it’s easy for us to understand why following selectors are inefficient:

2. Cascading Order

Cascading Style Sheets. What’s the actual meaning of cascading? The so-called cascade refers to the priority or weight scheme to determine which style rules apply if more than one rule matches against a particular element. The rules concerning the CSS selectors are chosen in the following order:

  • the rules with more ids in the selector
  • the rules with more classes in the selector
  • the rules with more tags in the selector

In the example below, all the tag selector, the class selector and the ID selector are targeting the div element. However, only the ID selector applies because ID selector weights more than class selector, while class selector weights more than tag selectors.

The specificity is calculated by counting the respective occurs of ID attributes, class attributes and tag attributes in the selector. And then write the three numbers in exact order with no spaces or commas to obtain a three digit number. The selector of larger number is applied. See, #main wins in the compete. 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s