Usage of pseudoclasses

New pseudoclasses are opening new horizons for CSS/HTML coders. Most of the features like first-child, last-child, and nth-child, were added with JavaScript code. For example, using jQuery code, you could get a list element and add specific classes to the first/last/nth element, and then to properly create a selector, you could add a CSS code.

But when it is natively supported by a browser, it is better to use CSS. Let's gather basic knowledge about this feature.

How to use :first-child, :last-child, :nth-child()

A short introduction to these pseudoelements is as follows:

• :first-child: This points to the element that is the first child of its parent

• :last-child: This points to the element that is the last child of its parent

• :nth-child(): This points to the element that matches the pattern wrapped in ()

The easiest way to check how it works is to create an unordered list with new elements:

<ul>
    <li>Element one</li>
   <li>Element two</li>...