HOLLA TECH - LEARN

Working with Pseudo-Classes
 

The CSS pseudo-classes allow us to style elements, or parts of elements, that exist in the document tree without using JavaScript or any other scripts. A pseudo-class starts with a “:” (colon).
The most commonly used pseudo-classes are :first-child and :last-child.

The :first-child pseudo-class matches an element that is the first child element of some other element.
In the following example, the selector matches any <p> element that is the first child of the div element:

The HTML:

<div id=“parent”>
   <p>First paragraph</p>
   <p>Second paragraph</p>
   <p>Third paragraph</p>
   <p>Fourth paragraph</p>
</div>

 

The CSS: 

#parent p:first-child {
   color: green;
   text-decoration: underline;  
}

 

Result: 

Holla Tech - Learn CSS3

The :last-child pseudo-class matches an element that is the last child element of some other element.

In the example below, the selector will match any <p> element that is the last child of the div element: 

#parent p:last-child {
   color: green;
   text-decoration: underline;  
}

 

Result:

Holla Tech - Learn CSS3


BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT