Are CSS selectors a big performance hit?

Posted by Kai Sellgren on Stack Overflow See other posts from Stack Overflow or by Kai Sellgren
Published on 2010-03-27T18:35:35Z Indexed on 2010/03/27 18:43 UTC
Read the original article Hit count: 640

Filed under:

css

|

selectors

Hi,

I have a web application with bunch of HTML code. There are some style-attributes that I can't get rid of, but I was wondering if it's worth the cleanness to get rid of class-names and use CSS selectors instead. Do CSS selectors perform slowly?

© Stack Overflow or respective owner

Related posts about css

HTMLUNIT Facebook javascript warning

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi I am trying to create simple application that would be able to search people on facebook using given e-mail. I am already able to log into an account using the HTMLunit tool and even create a page, which should throw result of my search. But when I try to print the result as XML the file is missing… >>> More
$this->headLink() includes duplicated script

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, Just like I did before, I used the following code for my new project. <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/button.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/inputText.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/fancyTable… >>> More
How much multiple style sheets slow down to website?

as seen on Stack Overflow - Search for 'Stack Overflow'
Here is 3 css file (one is only for IE) <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie… >>> More
mod_pagespeed is rewriting but not combining

as seen on Stack Overflow - Search for 'Stack Overflow'
I have the following problem. I installed mod_pagespeed but i am not getting the results i want! It does rewrite my css and changes the to the cache url but its not combining the css files. I have seached the web and stackoverflow for it but did not find a solution. Here are the tags <link… >>> More
CSS import or multiple CSS files

as seen on Stack Overflow - Search for 'Stack Overflow'
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. I have created a test page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional… >>> More

Related posts about selectors

How to use "this" and not "this" selectors in jQuery

as seen on Stack Overflow - Search for 'Stack Overflow'
I have 4 divs with content like below: <div class="prodNav-Info-Panel">content</div> <div class="prodNav-Usage-Panel">content</div> <div class="prodNav-Guarantee-Panel">content</div> <div class="prodNav-FAQ-Panel">content</div> And a navigation list… >>> More
Using JavaScript/jQuery to return a list of CSS selectors based on highlighted text

as seen on Stack Overflow - Search for 'Stack Overflow'
I've been given some project requirements that involve (ideally) returning a list of CSS selectors based on highlighted text. In other words, a user could do something like this on a page: Click a button to indicate that their next text selection should be recorded. Highlight some text on the page… >>> More
jQuery .each() with multiple selectors - skip, then .empty() elements

as seen on Stack Overflow - Search for 'Stack Overflow'
I'd like to remove all matching elements, but skip the first instance of each match: // Works as expected: removes all but first instance of .a jQuery ('.a', '#scope') .each ( function (i) { if (i > 0) jQuery (this).empty(); }); // Expected: removal of all but first instance… >>> More
How to use "this" and not "this" selectors in qQuery

as seen on Stack Overflow - Search for 'Stack Overflow'
I have 4 divs with content like below: <div class="prodNav-Info-Panel">content</div> <div class="prodNav-Usage-Panel">content</div> <div class="prodNav-Guarantee-Panel">content</div> <div class="prodNav-FAQ-Panel">content</div> And a navigation list… >>> More
What is the Relative Performance of Pseudo-Class and Custom Selectors?

as seen on Stack Overflow - Search for 'Stack Overflow'
It's my understanding that, in terms of selector speed, that #ID selectors are fastest, followed by element selectors, and then .class selectors. I have always assumed that pseudo-class selectors and custom selectors (those in the form ':selector') are similar to .class selectors, but I realised… >>> More