cssperformancecss-selectors

CSS Performance between class and attribute selectors

I'm wondering if there is a performance issue using attribute selectors instead of class selectors.

div.test {}
div[test] {}

P.S. : I'm only interested in CSS performance, not JS.

Solution

  • There is no performance issue. Both act same. But there is difference in specificity of the css with class versus Elements.

    Specificity - Specificity determines, which CSS rule is applied by browsers.

    If two selectors apply to the same element, the one with higher specificity wins.

    But specificity has hierarchy.

    1. Inline styles (Presence of style in document). An inline style lives within your XHTML document. It is attached directly to the element to be styled. E.g.
    2. IDs (# of ID selectors) ID is an identifier for your page elements, such as #div.
    3. Classes, attributes and pseudo-classes (# of class selectors). This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
    4. Elements and pseudo-elements (# of Element (type) selectors). Including for instance :before and :after.

    Source: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

    Hence div.test {} is more specific.