CSS3: From Knowledgable to Ninja – Part 1 Selectors, Structural Selectors

Structural selectors target elements based on their relationships to other elements in the DOM. They update dynamically if the page updates and they reduce the need for extra markup, classes and IDs.

First, last, & only

:first-child and :last-child
Target the first child/last child of its parent.

:first-of-type and :last-of-type and
Target the first/last of this type from its parent.

:only-child and :only-of-type
Target the element provided its the only/of-type element of its parent.

Its a lot easier to explain by playing with the demo, try all the selectors and try targeting the h2 and h3.

View the demo

nth pseudo-classes

:nth-child(n), :nth-last-child(n), :nth-of-type(n) and :nth-last-of-type(n)

The argument, n, can be a keyword, a number, or a number expression of the form an+b.

The keywords it accepts are odd and even – targetting odd or even-numbered elements.

When a number is entered into the argument for example 5 it will target the fifth element.

The argument n can also be given as an+b, where a and b are integers (for example, 3n+1).

In that expression the number b represents the position of the first element that we want to match (in this case the first position). the number a represents every element we want to match after that (in this case every third element after the first) so it will target the first, fourth, seventh and tenth.

View the demo

empty pseudo-class

:empty

The empty pseudo class targets elements that have no children at all.

<p></p>

<p> <!-- this is a comment --> </p>

<table>
  <tr>
    <td></td>
  </tr>
</table>

This can be useful for styling empty table cells, you could give them a greyed out look.

negation pseudo-class

:not(n)

Match all elements that do not match whats inbetween the parenthesis

li:not(.myClass) {color:red;}
  <ul>
    <li>one</li>
      <li class="myClass">two</li>
    <li>three</li>
  </ul>

target pseudo-class

:target

Target is used in conjunction with IDs and are matched when the current URL matches the ID.

#about:target {}
  <a href="#about>About Us</a>

A great example would be to make a tabbed area, where the tabs link to hash tags and you could style the target tab to look like the active tab.