CSS :last-of-type Selector

The :last-of-type Selector is used to target the last child element of the same type of it’s parent for styling. This selector is same as “:nth-last-of-type”.

Syntax:

:last-of-type {
  //property
}

Example:

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <style> 

        p:last-of-type { 

            background: limegreen; 

            color: white; 

            font-style: italic; 

            font-size: 1.875em; 

        } 

    </style> 

</head> 

<body> 

    <h3>I am heading.</h3> 

    <p>I am first child.</p> 

    <h3>I am heading.</h3> 

    <p>I am second child.</p> 

    <h3>I am heading.</h3> 

    <p>I am third child.</p> 

    <h3>I am heading.</h3> 

    <p>I am last child.</p> 

    <h3>I am heading.</h3> 

</body> 

</html>

Output:

Supported Browsers:

Google Chrome 1.0
Edge 12.0
Firefox 3.5
Safari 3.1
Opera 9.5

Article Tags :

CSS

Web Technologies

CSS-Selectors