[css3.svg]CSS3 - Pseudo classes - Structural

: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

Ads by Google

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;
  }
  

Ads by Google

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 line matches the rule. The second line 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

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

© Richard McGrath