Monday, 22 July 2013

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. 
                <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>
       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.

No comments:

Post a Comment