2
\$\begingroup\$

I am using the universal selector in CSS:

#containerDiv.containerTable tr td *
{
max-width:240px;
}

But Visual Studio suggests:

"Performance: Never use the universal selector. It has a big negative impact on browser rendering"

Will this have such a big impact? If so how can I overcome this? I have used * before and I have not seen any noticeable impact.

\$\endgroup\$
2
  • \$\begingroup\$ Are you trying to set the max-width of tds or of their inner elements? \$\endgroup\$
    – Spike
    Oct 9 '15 at 10:46
  • \$\begingroup\$ All elements that anyone adds into the td \$\endgroup\$ Oct 9 '15 at 10:58
4
\$\begingroup\$

The problem with the universal selector is that... it's universal. It's affecting all descendants, present and future. Impact is not really noticeable in small scale, but when your app starts to grow (like packing more and more stuff in <td>), or if fast rendering is critical (like say render at 60fps for smooth animation), then the effects will show.

The way you're asking this question seems to imply that you're using tables for layout. Otherwise, <td> content shouldn't be that many to warrant a universal selector. Don't use tables for layouting. Tables don't get rendered until all the markup of the table (from <table> to </table>) is parsed. In the meantime, all you will be seeing is a big blank space. Not good.

\$\endgroup\$
1
  • \$\begingroup\$ Does this go for divs that use display:table; as well? \$\endgroup\$ Sep 26 '17 at 6:30
2
\$\begingroup\$

Like most things micro-soft and browser, this is a bit out of date. You aren't going to kill your page with the * selector if it's used sparingly and / or scoped.

Having said that, you could probably could go crazy it with the * selector as css selectors are evaluated right to left - meaning that each rule that ends with a * will need to be checked for every element the page renders, making it the least efficient thing to end with. Combine this with using it on every selector and nesting it deeply and you probably could jam things up.

Separately, I'd assess the other part of the selector, putting a class on each <td>: <td class='my-table-cell'> would make for a much nicer selector: more modular and therefore easier to re-use; easier to understand; and less specific.

.my-table-cell *

\$\endgroup\$
2
\$\begingroup\$

Testing it reveals that "sweating over the selectors used in modern browsers is futile; most selection methods are now so fast it’s really not worth spending much time over." Source

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.