Efficient CSS with child selectors, is it worth it?

Question

I know:

div > p

is faster to render than

div p

but, in the other hand, it occupies one more character, so it increase the time to send the CSS file.

I know the speed difference is very little, but if you have a very large CSS file with a lot of selectors it can start being important.

So, my question is: what is better, to lose some time rendering and do not use child selectors or use child selectors and lose some more time sending the CSS file?

Answer 1

You should distinguish between loading the data from the server and parse the HTML+CSS.

at loading time you right (it will be slower)

but on render you are wrong (it will be faster)

P.S. don't forget: once you have the CSS - it won't be downloaded again.

Answer 2

Div > p and div p are not the same

if you have the following structure:

<div>
  <p id="p1">first p</p>
  <section>
     <p id="p2">second p</p>
  </section>
</div>

div > p will apply to only p1, while div p to both p1 and p2.

The speed of the selectors will depend on your html structure.