CSS Selector Level 2 » Structural pseudo-class

This structural pseudo-class represents the element which is the first children of its parent.

Syntax

Copy
:first-child {
    /* declarations */
}

Example

Copy
div :first-child {
    color: red;
}

The first <span> should be matched so it's red because it's the first children of its parent <div>.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (1.0) Yes (3.0) Yes (4) Yes (12.0) Yes (7.0) Yes (9.5)

Please wait a moment, the comments start loading now...
explorermozillachromesafariopera