Understanding :nth-of-type and :nth-last-of-type Pseudo Class

Hi..

Today we’ll discuss about :nth-of-type and :nth-last-of-type pseudo-class selector, these selectors will match direct child element (that have same type) of its parent. It’s the same as :nth-child that we have discussed before, the only difference is that these selectors only targeted to elements which have same type, that is HTML tag itself (such as div, p, ul, etc.).  Consider the following example:

Example 1: based on HTML tag

  • List 1
  • List 2
  • List 3
    Div 1

    P 1

    Div 2

    P 2

  • List 4
    • List 4.2
    • List 4.2
    • List 4.3
      DIV 1

      P 1

      DIV 2

      P 2

  • List 5

CSS Rule:

div:nth-of-type(2) {
	color: red;
}
li:nth-of-type(2) {
	color: blue;
}
p:nth-of-type(1) {
	color: yellow;
}

Example 2: based on class name

  • List 1
  • List 2
  • List 3 class=”warning”
  • List 4 class=”warning”
    Div 1 class=”warning”

    P 1 class=”warning”

    Div 2 class=”warning”

    P 2 class=”warning”

    Div 3 class=”warning”

    P 3 class=”warning”

  • List 5 class=”warning”

CSS Rule:

.warning:nth-of-type(odd) {
	color: red;
}

In the above example, the selector search for elements which have warning class, then it identify the type (HTML tag), which is <li>, <div>, and <p>. Once identified, it group the elements by it type and apply the argument defined in the selectors to each type that match.

:nth-last-of-type Pseudo Class Selector

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

Combining Selector:

As other selectors, these selectors can also be combined with another one including :nth-of-type itself, for example: div:nth-of-type(n+2):nth-of-type(-n+2) will match <div> elements that are meet both criteria: (n+2) and (-n+2). The illustration as shown in the following figure:

combining_nth_of_type_pseudo_class

Argument

As other pseudo-class selectors that begin with :nth-, this selector also accepts three type of arguments, that are: keyword, numeric, and formulas.

1. Keyword Argument

There are only two keywords that can be used for the argument, that are: odd and even. This argument will match elements that have same type which in odd order or even order, eg :nth-of-type(odd) or :nth-of-type(even), the illustration shown below:

DIV 1

P 1

DIV 2

P 2

DIV 3

P 3

DIV 4

P 4

DIV 5
div:nth-last-of-type(odd) {
	background-color: #6FA9FF;
}

2. Numeric Argument

The numeric argument will match an element that has the same type that is in the order according to the number in the argument. The minimum value is 1, and the maximum is not limited. If we fill zero or negative value, then it will be ignored by the selector, mean that nothing is selected.

For example, :nth-of-type(1) will match an element that is in the first order, :nth-of-type(2), second order, and so on, for :nth-last-of-type just count it from the last element.

DIV 1

P 1

DIV 2

P 2

DIV 3

P 3

DIV 4

P 4

DIV 5

CSS Rule:

div:nth-of-type(2) {
	background-color: #6FA9FF;
}
div:nth-last-of-type(2) {
	background-color: #6FA9FF;
}

3. Formula Argument

Formula is written using a pattern an+b, where:

  1. a is a number.
  2. n as a variable represent the sequences started from 0, followed by positive value 0,1,2,3, etc., as well as negative value -0, -1, -2, -3, and so on.
  3. + is an operator, can be positive (+) or negative (-).
  4. b is a number represent an offset, which is used if the formula uses the operator.

Example 1

p:nth-of-type(n+2) will match elements: 2(0+2), 3(1+2), 4(2+2), etc..

From first element p:nth-of-type(n+2)

DIV 1

P 1

DIV 2

P 2

DIV 3

P 3

DIV 4

P 4

DIV 5

From last element p:nth-last-of-type(n+2)

DIV 1

P 1

DIV 2

P 2

DIV 3

P 3

DIV 4

P 4

DIV 5

Example 2

div:nth-of-type(-n+3) will match <div> elements on the order of: 3(-0+3), 2(-1+3), and 1(-2+3)

From the first element: div:nth-of-type(-n+3)

DIV 1

P 1

DIV 2

P 2

DIV 3

P 3

DIV 4

P 4

DIV 5

From the last element: div:nth-last-of-type(-n+3)

DIV 1

P 1

DIV 2

P 2

DIV 3

P 3

DIV 4

P 4

DIV 5

Example 3

In this example, we’ll combine the argument selector of example 1 and 2, for instance, div:nth-of-type(n+2):nth-of-type(-n+4) will match <div> elements that meet both arguments, as follow:

From the first element:

DIV 1

P 1

DIV 2

P 2

DIV 3

P 3

DIV 4

P 4

DIV 5

From the last element:

DIV 1

P 1

DIV 2

P 2

DIV 3

P 3

DIV 4

P 4

DIV 5

Example 4

p:nth-of-type(3n+1) will match <p> elements on the order of: 1(3×0 + 1), 4(3×1 + 1), 7(3×2 + 1), etc…

From the first element: p:nth-of-type(3n+1)

DIV 1

P 1

DIV 2

P 2

DIV 3

P 3

DIV 4

P 4

DIV 5

From the last element: p:nth-last-of-type(3n+1)

DIV 1

P 1

DIV 2

P 2

DIV 3

P 3

DIV 4

P 4

DIV 5

Browser Support

:nth-of-type Pseudo Class

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

Source: Mozilla Developer Network

:nth-last-of-type Pseudo Class

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4.0 3.5 (1.9.1) 9.0 9.5 3.2
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 1.0 (1.9.1) 9.0 10.0 3.2

Source: Mozilla Developer Network

Related Post

Leave a comment

Like Us

Social