CSS :nth-child Element Selector – POFTUT

CSS :nth-child Element Selector

CSS provides the :nth-child() selector which is ver useful select different elements with different rules and apply some CSS to these elements. :nth-child() is provided in the CSS version 3.

Syntax

CSS :nth-child() has the following syntax

  • :nth-child is the keyword
  • NUMBER is the selected number or rule used to apply CSS. It can be even, odd, 1 or 2n+1 where we will look at all of the detail below.
  • CSS is the CSS code we want to apply to the elements those match with the selector of NUMBER.

Select nth Children/Elements

We will start with a simple example where we will provide the element or child number we want to select and apply CSS. In this example, we will only select the fifth element or child and make its background color red.

Select nth Child

Select nth Child

Select Even Children/Elements

There are some pre-configured selection keywords like even, od, etc. We can use even keyword in or select even-numbered elements in the given elements or child. We can also use 2n to select even elements.

LEARN MORE  CSS Rounded Corners for HTML Elements

Select Even Childs

Select Even Childs

Select Odd Children/Elements

We can also use odd keyword in order to select odd-numbered elements or children. Also 2n+1 can be used to select odd elements.

Select Odd Childeren/Elements

Select Odd Children/Elements

Select Given Range Childs

Select After The Specified Number

We can select after the specified number elements. In this example, we will select elements after 6 to 10.

LEARN MORE  CSS first-child Selector Tutorial with Examples

Select After The Specified Number

Select After The Specified Number

Select First Three Children/Elements

We can also select the first given number of elements or children. In this example, we will select the first 3 children or elements.

Select First Three Childeren/Elements

Select First Three Children/Elements

Select The Last Child or Element

CSS also provides selector like nth-last-child(). We can use this selector in order to select the last element or child.

LEARN MORE  How To Change Font Color with CSS in HTML?

Select The Last Child or Element

Select The Last Child or Element

Leave a Reply

Your email address will not be published. Required fields are marked *

Enjoy this blog? Please spread the word :)