Understanding :nth-child and :nth-last-child Pseudo Class Selector

In css, there are many pseudo class selector available to use, and today I’ll try to write a tutorial that hopefully can help you to easily understand :nth-child and :nth-last-child pseudo class selector.

:nth-child pseudo class selector allows us to select child element based on a specific sequence to its parent. As the name implies, this selector will select the nth child element, eq: 1,th, 3th, 5th, and so on. Do not be confused with the term of child, because basically all the element inside the body element are a child (unless the <body> it self), all of them have its parent at least to the <body> element.

Noteworthy in the use of this selector is that it will select all child elements in each parent in a group of element, consider the following example:

  • List 1
  • List 2
    • List 2.1
    • List 2.2
    • List 2.3
      • List 2.3.1
      • List 2.3.2
      • List 2.3.3
  • List 3
  • List 4
    • List 4.1
    • List 4.2
    • List 4.3
      • List 4.3.1
      • List 4.3.2
      • List 4.3.3
  • List 5

HTML:

<ul class="sample-nth">
	<li>List 1</li>
	<li>List 2
		<ul>
			<li>List 2.1</li>
			<li>List 2.2</li>
			<li>List 2.3
				<ul>
					<li>List 2.3.1</li>
					<li>List 2.3.2</li>
					<li>List 2.3.3</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>List 3</li>
	<li>List 4
		<ul>
			<li>List 4.1</li>
			<li>List 4.2</li>
			<li>List 4.3
				<ul>
					<li>List 4.3.1</li>
					<li>List 4.3.2</li>
					<li>List 4.3.3</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>List 5</li>
</ul>

CSS Rule:

li:nth-child(1) {
	color: blue;
}

li: nth-child(2) {
	color: red;
}

In the example above, each li element that is in the first position of its parent will be colored blue dan red for the second position. The reason why the color of List 2.3 is red because it inherit from List 2 style (:nth-child(2)) and none of style applied to it, different from List 2.1 which is styled using :nth-child(1). This also occurs in List 2.3.3

:nth-last-child

:nth-last-child pseudo-class is the same as the :nth-child, the only difference is the sequence is counted from the last element, so, in this tutorial, style that applies to the :nth-child pseudo-class is also applicable to the :nth-last child pseudo-class.

Combining Selector

Like another selector, :nth-child selector can be combined with other selectors, including :nth-child itself, the result of this combination will match elements that is meets the criteria of combined selector, for example :nth-child(n+3):nth-child(-n+3), will select elements that meet the criteria (n+3) and (-n+3) (the example of this pattern will be discussed later). The illustrations as shown in the following figure:

combining_nth_child_selector

 

Argument

This selector accepts three types of arguments: keyword, numeric, and formula

1. Keyword Argument

Keywords that can be used for this selector is “odd” and “even” without out quotes:

  • odd keyword, eg :nth-child(odd) As the name implies, this argument will match all elements that are in the odd order (1, 3, 5, 7, etc ..)
    From first element :nth-child(odd)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    From last element :nth-last-child(odd)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
  • even keyword, eg: :nth-child(even). As the name implies, this argument will match all elements that are in the even order (2, 4, 6, 8, etc ..)

2. Numeric Argument

The numeric argument will select the elements that are in the order of the number in the argument. The smallest number is 1, and the maximum is not limited, and only work with the positive value, if the argument value is 0 or negative then nothing will be selected.

An example of nth-child selector: :nth-child(1) will select the elements that are on the first order, :nth-child (2), second order, and so on, for :nth-last-type just count it from the last element.

li:nth-child(3) {
	background: #6FA9FF;
}
li:nth-last-child(3) {
	background: #00BF00;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

3. Formula Argument
Formula wrote using the format: an+b, where:

  1. a represents a number,
  2. n as a variable, which reflects a sequence starting from 0, following by negative value -0, -1, -2, etc .. (-n) or positive value 0,1,2, etc … (n)
  3. + as an operator can be + or –
  4. b is an offset number that is used if the formula uses an operator.

Example 1

:nth-child(n+5) will select elements: 0 (0 + 5) – not used, 6 (1 + 5),  7 (2 + 5),  8 (3 + 5), etc …, for nth-last-type, just start counting from the last element.

From first element li:nth-child(n+5)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

From last element li:nth-last-child(n+5)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Example 2

:nth-child(-n+3) will select elements: 3(-0+3) , 2(-1+3), and 1(-2+3), for :nth-last-child, just count the element from the last.

From first element: li:nth-child(-n+3)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

From last element: li:nth-last-child(-n+3)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Example 3

:nth-child(n+3):nth-child(-n+5) will match elements that meet both criteria (the sequence which exists in both argument: 3,4,5,6,… AND 5,4,3,2) which are 3, 4, and 5.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Counting from last element: :nth-last-child(n+3):nth-last-child(-n+5)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

Example 4

:nth-child(3n+1), will match elements: 1 (3×0+1), 4 (3×1+1), 7 (3×2+1), 10 (3×3+1), etc …

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

From last element :nth-last-child(3n+1)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

 Browser Support

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 3.5 (1.9.1) 9.0 9.5 3.1

Source: Mozilla Developer Network

Real world example of uses :nth-child and :nth-last-child pseudo-class selector

In practice there are many cases associated with both selectors, usually while using table or displaying data grid, here some examples.

Example 1: Coloring table rows based on particular value

In this example we’ll color a table rows based on its value. Suppose we had 10 ranks, we give the first three ranks green color,  5 to 7 rank are yellow, and 8 and up are red.

No Name Nilai
1 Name A 10
2 Name B 9.5
3 Name C 8
4 Name D 7
5 Name E 6
6 Name F 5
7 Name G 4
8 Name H 3
9 Name I 5
10 Name J 5

CSS Rule:

/* Table */
table {
	border-collapse:collapse;
	margin:0;
	font-size: 100%;
}
th {
	background-color: #2784C5;
	color: #FFF;
	text-align: center;
	padding: 5px;
	border: 1px solid #6399BE;
}
td {
	padding: 5px 15px;
	border: 1px solid #A5A5A5;
}
/* :nth-child */
tr:nth-child(-n+3) td{
	background-color:#84E084;
}
tr:nth-child(n+4):nth-child(-n+6) td{
	background-color:#FFFFA4;
}
tr:nth-child(n+7) td{
	background-color:#FF7171;
}
/* First and Last */
td:first-child,
td:last-child {
	text-align: right;
}

Notice that we also use :first-child and :last-child pseudo-class selector to make the numbers in the first and last column to be right aligned.

Example 2: Creating Zebra Row Using CSS

The next example is to create a zebra row, which is usually used for displaying data table. Continuing from the previous example, let’s change the CSS rule line 19 – 27 with the following rule:

tr:nth-child(even) td {
	background-color: #E6E6E6;
}

The Result:

No Name Nilai
1 Name A 10
2 Name B 9.5
3 Name C 8
4 Name D 7
5 Name E 6
6 Name F 5
7 Name G 4
8 Name H 3
9 Name I 5
10 Name J 5

Example 3: Adjusting padding of thumbnail gallery

Assumed we had nine thumbnail images which are arranged as follows:

HTML:

<ul class="sample-gallery">
	<li>Image 1</li>
	<li>Image 2</li>
	<li>Image 3</li>
	<li>Image 4</li>
	<li>Image 5</li>
	<li>Image 6</li>
	<li>Image 7</li>
	<li>Image 8</li>
	<li>Image 9</li>
</ul>

CSS:

ul.sample-gallery {
	border: 1px solid #CCCCCC;
    margin: 0;
	display: inline-block;
	width: auto;
	text-align: center;
	padding: 10px;
	list-style-type: none;
}
ul.sample-gallery li {
	float: left;
	margin: 0 7px 7px 0;
	width: 85px;
	height: 85px;
	background-color: #CCCCCC;
	line-height: 80px;
}
ul.sample-gallery li:nth-child(3n+1) {
	clear:both;
}

in the above example, the distance between the image and the right and bottom border are doubled, because besides the margins of the image itself which is 7px, also padding of the ul element which is 10px, so in these case where :nth-child pseudo class come into play, let’s add some css rules:

/* Remove the right margin of the image of 3, 6, 9, etc..  */
li:nth-child(3n) {
	margin-right: 0;
}
/* Remove the bottom margin of the image of 7, 8, 9 */ 
li:nth-last-child(-n+4) {
	margin-bottom: 0;
}

The Result:

  • Image 1
  • Image 2
  • Image 3
  • Image 4
  • Image 5
  • Image 6
  • Image 7
  • Image 8
  • Image 9

Conclusion

The use of :nth-child and :nth-last-child pseudo class selector helps us to create a style in HTML documents mainly related to sequence element (eq: table or list) easily, imagine we add a class to each “row” (<tr> or <li>) element, of course, our code would be complicated, not “clean” and will be troublesome if there is an improvement.

Subscibe Now

Loves articles on webdevzoom.com? join our newsletter to get quality article right to your inbox. Nothing else, just quality stuff!!!

Related Post

Leave a comment

Like Us

Newsletter

Great information from webdevzoom.com right to your inbox

We value your privacy

Social