Monday 22 July 2013

CSS3 pseudo classes: Difference between only-child and only-of-type

  • Only-child: Select elements of the document tree if parent have have only one child means there is no siblings.
        <div>          
                <p>I have just returned.</p>               
        </div>
        p:only-child { text-decoration: underline; }

  • Only-of-type: Selects elements of the document tree if parent have no siblings of same type.
            <div>
                <h2>Wuthering Heights</h2>                
                <p>In all England...</p>
                <h3>By Emily Bronte</h3>
            </div>
           p:only-of-type { font-style: italic; }

No comments:

Post a Comment