CSS3 - pseudo classes - other

:lang

Matches an element based on it's W3C language code.


  :lang(de), :lang(fr) {
      font-style: italic;
      border-bottom: 2pt solid violet;
  }
  
  • Good Day
  • Bonne journée
  • Schönen Tag

  <ul>
      <li lang="en">Good Day</li>
      <li lang="fr">Bonne journée</li>
      <li lang="de">Schönen Tag</li>
  </ul>
  

:target

Matches an element whose id is the same the current URL fragment.


  :target {
      border: 2pt solid blue;
  }
  

Note the URL fragment in the browser address bar. #target-example


  <a href="#target-example">Click to target this entry</a>
  

:not

Introduces a not clause into the selector.


  li:not(.enabled) {
      color: gray;
  }
  
  • Home
  • About
  • Contact

  <ul>
      <li class="enabled">Home</li>
      <li class="enabled">About</li>
      <li>Contact</li>
  </ul>
  

Ads by Google



Ask a question, send a comment, or report a problem - click here to contact me.

© Richard McGrath