CSS3 - pseudo classes - the complete list

A pseudo class is a keyword added to a css selector, to select element states that aren't necessarily part of the document markup itself.

Types of pseudo-class:

Ads by Google

Dynamic pseudo-classes

:visited

A link that been visited.


  a:visited {
      background-color: red;
  }
  

  <a href="visited.html">Click to visit</a>
  

:hover

The mouse is over the element.


  .button:hover, .a:hover {
      outline: 1pt solid blue;
  }
  
Hover me Link

  <button>Hover me Button</button>
  <a href="#">Hover me Link</a>
  

:active

The element is being clicked.


  .button:active, .a:active {
      background-color: green;
  }
  
Click and Hold

  <button>Click and Hold</button>
  <a href="#">Click and Hold</a>
  

:focus

The element has the keyboard focus.


  .button:focus, .a:focus {
      background-color: violet;
  }
  
Focus me Link

  <button>Focus me Button</button>
  <a href="#">Focus me Link</a>
  

Ads by Google

UI element pseudo-classes

:enabled

A user interface element that is enabled.


  button:enabled {
      border: 1pt solid blue;
  }
  

  <button>An enabled button</button>
  

:disabled

A user interface element that is disabled.


  button:disabled {
      border: 1pt solid red;
  }
  

  <button disabled>A disabled button</button>
  

:checked

A user interface element that is checked. For checkboxes and radio buttons only.


  input:checked {
      background-color: orange;
  }
  

  <div>
      <input type="radio" name="genderSelect" id="male" value="m"> <label for="male">Male</label>
      <input type="radio" name="genderSelect" id="female" value="f"> <label for="female">Female</label>
  </div>
  <input type="checkbox" id="over18"><label for="over18">Over 18?</label>
  

Ads by Google

Structural pseudo-classes

:root

Selects the root element of the document.

For an HTML document, the root is html. The root selector has higher specificity than the html element selector.


  :root {
      background-color: darkgray;
  }
  

  <button onclick="changeRoot()">Click to change root</button>
  

  <script>
  function changeRoot() {
      var style = document.createElement('style')
      style.type = 'text/css'
      style.innerHTML = ':root { background-color: darkgray; }'
      document.getElementsByTagName('head')[0].appendChild(style);
  }
  </script>
  

:nth-child

Select a child element based on it's position within it's parent.


  span:nth-child(an+b) {
      background-color: darkred;
      color: white;
  }
  

nth-child(3):

01 02 03 04 05 06 07 08 09 10

nth-child(3n):

01 02 03 04 05 06 07 08 09 10

nth-child(3n-1):

01 02 03 04 05 06 07 08 09 10

nth-child(3n+1):

01 02 03 04 05 06 07 08 09 10

nth-child(even):

01 02 03 04 05 06 07 08 09 10

nth-child(2n):

01 02 03 04 05 06 07 08 09 10

nth-child(odd):

01 02 03 04 05 06 07 08 09 10

nth-child(2n-1):

01 02 03 04 05 06 07 08 09 10

nth-child(n+3):

01 02 03 04 05 06 07 08 09 10

nth-child(-n+6):

01 02 03 04 05 06 07 08 09 10

nth-child(n+3):nth-child(-n+9):

01 02 03 04 05 06 07 08 09 10

nth-child(n+3):nth-child(odd):nth-child(-n+9):

01 02 03 04 05 06 07 08 09 10

nth-child(n+3):nth-child(even):nth-child(-n+9):

01 02 03 04 05 06 07 08 09 10

:nth-last-child

Select a child element based on it's position within it's parent, but counting from the end.


  span:nth-last-child(an+b) {
      background-color: darkred;
      color: white;
  }
  

nth-last-child(3):

10 09 08 07 06 05 04 03 02 01

nth-last-child(3n):

10 09 08 07 06 05 04 03 02 01

nth-last-child(3n-1):

10 09 08 07 06 05 04 03 02 01

nth-last-child(3n+1):

10 09 08 07 06 05 04 03 02 01

nth-last-child(even):

10 09 08 07 06 05 04 03 02 01

nth-last-child(odd):

10 09 08 07 06 05 04 03 02 01

nth-child vs. nth-of-type

*:nth-child(2) select the second child element, regardless of it's type.
div:nth-child(2) selects the second child element only if it is a div. If the second child is not a div, the css rule won't be applied.
div:nth-of-type(2) selects the second element of all children that are div elements.

If your child elements are of the same type, then nth-child is the same as nth-of-type.

:nth-of-type

The same as nth-child, except that it select items of the specified type only.
E.g. span.


  span:nth-of-type {
      background-color: red;
      color: white;
  }
  

:nth-last-of-type

The same as nth-last-child, except that it select items of the specified type only.
E.g. span.


  span:nth-last-of-type {
      background-color: red;
      color: white;
  }
  

:first-child

Selects the first child element.


  span:first-child {
      background-color: darkred;
      color: white;
  }
  

first-child:

01 02 03 04 05 06 07 08 09 10

:last-child

Selects the last child element.


  span:last-child {
      background-color: darkred;
      color: white;
  }
  

last-child:

01 02 03 04 05 06 07 08 09 10

:first-of-type

The same as :first-child except that it select the first child of the specified type.
E.g. span


  span:first-of-type {
      background-color: darkred;
      color: white;
  }
  

:last-of-type

The same as :last-child, except that it select the last child of the specified type.
E.g. span.


  span:last-of-type {
      background-color: darkred;
      color: white;
  }
  

first-child vs. first-of-type and last-child vs. last-of-type

*:first-child select the first child element, regardless of it's type.
div:first-child selects the first child only if it is a div. If the first child is not a div, the css rule won't be applied.
div:first-of-type selects the first element of all children that are div elements.

If your child elements are of the same type, then first-child is the same as first-of-type.

:only-child

Selects an element that is the only child of it's parent.


  span:only-child {
      background-color: darkred;
      color: white;
  }
  
01
01 02 03 04 05 06 07 08 09 10

The first list matches the rule. The second list does not.

:only-of-type

The same as :only-child except that it first selects all children of the specified type,
and then matches if there is only one child of that type.


  span:only-of-type {
      background-color: darkred;
      color: white;
  }
  

:empty

An element that is completely empty.


  p:empty {
      border: 1pt solid red;
  }
  
  p:empty::after {
      content: "This paragraph was Empty!";
  }
  


  <p></p>
  

Ads by Google

Other pseudo-classes

: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