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

1. :lang(en) {
   }
   
   <div lang='en'></div>

   The CSS selector should match the element, because the language is an exact match

2. :lang(en) {
   }
   
   <div lang='EN'></div>

   The CSS selector should match the element, because the language is an exact match. The case of the language should not matter.

3. :lang(en) {
   }
   
   <div lang='en-US'></div>

   The CSS selector should match the element, because the first component of the language is an exact match

4. :lang(en) {
   }
   
   <blockquote lang='en'>
      <div></div>
   </blockquote>

   The CSS selector should match the inner element, because language is inherited and the language is an exact match

5. :lang(en) {
   }
   
   <blockquote lang='en-US'>
      <div></div>
   </blockquote>

   The CSS selector should match the inner element, because language is inherited and the first component of the language is an exact match

6. :lang(en) {
   }
   
   <div></div>

   The CSS selector should not match the element, because the language is not set

7. :lang(en) {
   }
   
   <div lang=''></div>

   The CSS selector should not match the element, because the language is empty

8. :lang(en) {
   }
   
   <div lang='nl'></div>

   The CSS selector should not match the element, because the language is different

9. :lang(en) {
   }
   
   <div lang='nl-en'></div>

   The CSS selector should not match the element, because the first component is different. The second component should not be taken into account.

10. :lang(en) {
    }
    
    <div lang='enUS'></div>

    The CSS selector should not match the element, because it does not match exactly. Because the hyphen is missing we are only allowed to do an exact match.

11. :lang(en) {
    }
    
    <div lang='en'>
       <div lang='nl'></div>
    </div>

    The CSS selector should not match the inner element, because the inherited language is overwritten