Performance in CSS hierarchy

Question

If I have the following HTML:

<div id="container">
   <div id="inner">
   </div>
</div>

Is there any difference , performance wise, between:

#container #inner {
      width:300px;
}

to

#inner {
      width:300px;
}

?

Not sure about performance, but nesting ID selectors is almost always pointless. — Shurdoof
– Shurdoof, Commented Dec 16, 2010 at 16:18

ScottE · Accepted Answer · 2010-12-16 16:19:05Z

3

The performance difference will be inconsequential. Try optimizing other parts of your code!

That being said, it's generally best to be as non-specific as possible.

answered Dec 16, 2010 at 16:19

ScottE

21.6k19 gold badges97 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zack · Accepted Answer · 2010-12-16 16:20:52Z

1

wont really affect it,

just CSS selectors with a wide-matching key selector can hurt performance ..

some insight here: http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/

answered Dec 16, 2010 at 16:20

zack

3,1982 gold badges36 silver badges51 bronze badges

2 Comments

Joel Over a year ago

If I understand correctly from the article, in a page where I have many anchor tags, it will be better to give each a class/id and select it by #container a#ID {} than #container a {} ?

zack Over a year ago

@ joel : i believe thats the implication. though it'd be simpler to use #ID {} instead of #container a#ID {}

dheerosaur · Accepted Answer · 2010-12-16 16:23:56Z

1

As ids aren't supposed to repeat, you can simply select using #inner

answered Dec 16, 2010 at 16:23

dheerosaur

15.2k6 gold badges33 silver badges31 bronze badges

Collectives™ on Stack Overflow

Performance in CSS hierarchy

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related