CSS Pseudo elements


Pseudo elements in CSS are used to select mentioned elements.

    Syntax:

  • selector:pseudo-class{
    property:value;
    }

CSS first child pseudo class

First child pseudo class selects first child of mentioned element.

    Syntax:

  • selector:first-child{
    property:value;
    }

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child{
color:green;
}
</style>
<title>
</title>
</head>
<body>
<p>This is first child.</p>
<p>This is second child.</p>
<p>This is third child.</p>
<p>This is fourth child.</p>
</body>
</html>

Output:

This is first child.

This is second child.

This is third child.

This is forth child.

Selecting first element of mentioned selector

    Syntax:

  • selector elementname:first-child{
    property:value;
    }

Example:

<!DOCTYPE html>
<html>
<head>
<style>
p b:first-child{
color:green;
}
</style>
<title>
</title>
</head>
<body>
<p>This is <b>first</b> child.</p>
<p>This is second child.</p>
<p>This is third child.</p>
<p>This is fourth child.</p>
</body>
</html>

Output:

This is first child.

This is second child.

This is third child.

This is forth child.