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

1. div[lang|=en] {
   }
   
   <div lang='en'></div>

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

2. div[lang|=en] {
   }
   
   <div lang='EN'></div>

   The CSS selector should match the HTML fragment because the value of the lang attribute should be case insensitive in a HTML document

3. div[lang|=en] {
   }
   
   <div LANG='en'></div>

   The CSS selector should match the HTML fragment because the case of the attribute name should not matter in a HTML document

4. div[lang|=en] {
   }
   
   <div lang='en-US'></div>

   The CSS selector should match the HTML fragment because the value before the hyphen is an exact match

5. div[lang|=en] {
   }
   
   <div lang='en-Nonsense'></div>

   The CSS selector should match the HTML fragment because the value before the hyphen is an exact match

6. div[lang|=en] {
   }
   
   <div></div>

   The CSS selector should not match the HTML fragment because the attribute is not present

7. div[lang|=en] {
   }
   
   <p lang='en'><div></div></p>

   The CSS selector should not match the HTML fragment because the attribute is not present and it should not match inherited properties

8. div[lang|=en] {
   }
   
   <div lang=''></div>

   The CSS selector should not match the HTML fragment because the attribute is empty

9. div[lang|=en] {
   }
   
   <div lang='nl'></div>

   The CSS selector should not match the HTML fragment because the attribute does not contain the correct value

10. div[lang|=en] {
    }
    
    <div lang='english'></div>

    The CSS selector should not match the HTML fragment because the attribute does not contain the correct value

11. div[lang|=en] {
    }
    
    <div lang='nl-en'></div>

    The CSS selector should not match the HTML fragment because the part before the hyphen is not an exact match

12. div[lang |= en] {
    }
    
    <div lang='en'></div>

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

13. div[lang |=en] {
    }
    
    <div lang='en'></div>

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

14. div[lang|= en] {
    }
    
    <div lang='en'></div>

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

15. div[title|=match] {
    }
    
    <div title='match'></div>

    The CSS selector should match the HTML fragment because the value of the title attribute is an exact match

16. div[title|=match] {
    }
    
    <div title='MATCH'></div>

    The CSS selector should not match the HTML fragment because value of the title attribute should be compared in a case-sensitive way

17. div[id|=match] {
    }
    
    <div id='MATCH'></div>

    The CSS selector should not match the HTML fragment because value of the id attribute should be compared in a case-sensitive way

18. label[for|=match] {
    }
    
    <label for='MATCH'></label>

    The CSS selector should not match the HTML fragment because value of the for attribute should be compared in a case-sensitive way

19. div[lang|=en] {
    }
    
    <div lang=' en '></div>

    The CSS selector should not match the HTML fragment because the attribute does not contain the correct value - it is not allowed to strip whitespace in HTML documents