CSS/Selectors/pseudo-classes/:first-of-type

From Web Education Community Group
< CSS‎ | Selectors
Jump to: navigation, search

Pseudo-class :first-of-type

The :first-of-type pseudo-class represents an element that is the first sibling of its type in the list of children of its parent element. Same as :nth-of-type(1).

Syntax

selector:first-of-type{ properties }


Example

It is a valid description for the first two dt elements in the following example but not for the third one:

[style.css]

 dl dt:first-of-type{
   color: red;
 }


[index.html]

<body>
  <dl>
    <dt>gigogne</dt>
    <dd>
      <dl>
        <dt>fusée</dt>
        <dd>multistage rocket</dd>
        <dt>table</dt>
        <dd>nest of tables</dd>
      </dl>
    </dd>
  </dl>
</body>

Css3 selectors first-of-type.png

CSS defines the :first-of-type pseudo-class selector in 6.6.5.8. :first-of-type pseudo-class.