This page is part of the CSS3.info CSS selectors test. See more info on CSS3 selectors.

  1. .class {
    }
    
    <div class='class'></div>

    The CSS selector should match the HTML fragment because the class is an exact match

  2. .class {
    }
    
    <div class='another class'></div>

    The CSS selector should match the HTML fragment because the list classes contains an exact match

  3. .first.second {
    }
    
    <div class='first second'></div>

    The CSS selector should match the HTML fragment, both specified classes match

  4. .third.fourth {
    }
    
    .third {
    }
    
    <div class='third fourth'></div>

    The both CSS selectors should match the HTML fragment, but the first should take precendence over the second because it is more specific. So the second should be able to define additional properties, but not overwrite properties from the first.

  5. .class {
    }
    
    <div class='classy'></div>

    The CSS selector should not match the HTML fragment because the class does not contain an exact match

  6. .first.second {
    }
    
    <div class='first'></div>

    The CSS selector should not match the HTML fragment because only one of the two specified classes matches