This is just a question to help me understand CSS rendering better.

Lets say we have a million lines of this.

<div class="first">
    <div class="second">
        <span class="third">Hello World</span>
    </div>
</div>

Which would be the fastest way to change the font of Hello World to red?

.third { color: red; }
div.third { color: red; }
div.second div.third { color: red; }
div.first div.second div.third { color: red; }

Also, what if there was at tag in the middle that had a unique id of "foo". Which one of the CSS methods above would be the fastest.

I know why these methods are used etc, im just trying to grasp better the rendering technique of the browsers and i have no idea how to make a test that times it.

UPDATE: Nice answer Gumbo. From the looks of it then it would be quicker in a regular site to do the full definition of a tag. Since it finds the parents and narrows the search for every parent found.

That could be bad in the sense you'd have a pretty large CSS file though.