Speed of CSS
- by Ólafur Waage
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.
