:first-of-type

:first-of-type – pseudo-class | Selectors Level 3

The :first-of-type selects the first sibling of the given type.

Syntax

element:first-of-type{
    style properties
}

Example

The HTML code

<div>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <div>I am a div.</div>
</div>
p:first-of-type{
    background:#FFB7C5;
}

The paragraph 1 is selected because it is the first element of its parent and it is of required type <p>

  • 1
  • 2

Paragraph 1

Paragraph 2

I am a div.

Related

Resources

Browser compatibility

Internet Explorer
9,0
Firefox
3.5
Chrome
1.0
Safari
3.2
Opera
9.5
Mobile
Safari Mobile
works
Android
works
Chrome Mobile
works
IE Phone
works
Opera Mini
works
Opera Mobile
works