Do more specific css rules load better?

Question

You can do this:

.info
{
    padding: 5px ;
}

Or, if you know it will be a div, you can do this

div.info
{
    padding: 5px ;
}

So, when there's a nested list.. you can do this..

div.info ul.navbar li.navitem a.sitelink
{
    color: #f00;
}

Or you can do this

a.sitelink
{
    color: #f00;
}

Readability aside, which is better for the browser to parse/run?

Answer 1

Keep rules as general as possible -- it is faster and uses less bytes. See Google's article for more info.