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