CSS3 guide: 3.7. first and last child of type

This is a post in a series, please see the Table of Contents [webmasterworld.com] for the other posts in the series.

3.7. first and last child of type

The first-of-type [w3.org] and last-of-type [w3.org] pseudo selectors are in fact doing exactly the same as :nth-of-type(1) and :nth-last-of-type(1) pseudo selectors.

Syntax: E:first-of-type

selects the first child of its type in a parent

Syntax: E:last-of-type

selects the last child of its type in a parent

Example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>test</title>
    <style type="text/css">
      table {
        border-collapse: collapse;
        text-align: center;
      }
      td, th {
        border: 1px dotted red;
        width: 6em;
      }
      td:first-of-type {
        background-color: yellow;
        text-align: left;
      }
      th:last-of-type {
        border-right: 3px solid red;
        text-align: right;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <th>head</th>
        <th>head</th>
        <td>cell</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
      </tr>
    </table>
  </body>
</html>

Support:

Supported in most standard compliant browsers
Not supported in Firefox < 3.5
Not supported by IE (including IE8)

Graceful fallback:
As always hard to do with selectors

IE8.js adds support for :nth-of type(1) and :nth-last-of-type(1) which can offer the same functionality in IE7 and IE6.

No known solution for IE8.
No known solution for Firefox prior to version 3.5

Practical use:
Finding non-essential uses for these selectors isn't all that trivial. The logical place are containers that naturally contain multiple kinds of children mixed together where the first or last one could use some special styling without beign all too essential.

CSS3 guide: 3.7. first and last child of type

swa66

swa66

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week