CSS3 Pseudo Classes: first-of-type, last-child, first-child and last-of-type

• first-of-type: It selects first element of same type. This is similar to first-child, which was introduced in CSS2. In practice, however, they are as different as nth-child and nth-of-type. 

            <div>

                <h2>Wuthering Heights</h2>

                <p>I have just returned...</p>

                <p>This is certainly...</p>

                <p>In all England...</p>

                <h3>By Emily Bronte</h3>

            </div>

       p:first-of-type { font-style: italic; }

       Result: I have just returned...

• first-child: It selects the first element of the parent. If i use above div element example.

      p:first-child {text-decoration: underline;}

      Result: no element will be selected.

      if i remove <h2>Wuthering Heights</h2> element then it will select <p>I have just returned...</p>

     last-of-type &  last-child will work in the reverse way. It will select last element of same type and last element of the siblings accordingly.