CODEWITHSUNDEEP
htmlcssperformancecss-selectors
dm03514
dm03514

Reputation: 55962

It faster to style an element through a class or starting with a parent CSS/HTML

I am sorry if my question is not overly clear.

I will first illustrate my question with an exmaple:

<div id="parent">
  /*This contains a dynamically generated amount of children from 1 - 200*/
  <div class="child"></div>
</div>

Is it best practice/faster to style each child using .child {} or using #parent div {}

If there are 200 children then that is a lot of additional text.

Thank you

Upvotes: 0

Views: 99

Answers (4)

Shi
Shi

Reputation: 4258

You should apply your styles in a semantical way. If you want to style all elements with class child, go ahead with .child. If you want to style all div below the parent, go for #parent div.

The style should be easy to read and maintain, and if possible adopt to new "situations" automagically.

If possible, you should also consider the size of your website. A #parent div without classes child for each div certainly is smaller than div.class and a class given for each div.

So bascially, it all depends on what you want to do and your target audience. A regular desktop system with broadband connection can handle either, a handheld with slow and expensive GSM connection might not.

Upvotes: 1

Jacek Kaniuk
Jacek Kaniuk

Reputation: 5229

that should be fastest:

#parent > div

browser would have to find element by id and list its first-level children. Both actions are very fast in all browsers.

Finding by class has different performance depending on browser.

Upvotes: 1

ayyp
ayyp

Reputation: 6598

I believe it would be better practice, if not faster, to just style .child{} or #parent .child{}

Upvotes: 0

AlexC
AlexC

Reputation: 9661

    #parent div.child{
      background:red;    
   }

Upvotes: 0

Related Questions