nthoftype

The `:nth-of-type` pseudo-class in CSS is used to select elements based on their position among siblings of the same type. Unlike the `:nth-child` pseudo-class, `:nth-of-type` only considers elements of the same type (tag name) when determining the position.

Syntax

The syntax for `:nth-of-type` is as follows:

```css

element:nth-of-type(n) {

/ styles /

}

```

Here, `n` can be a number, a keyword, or a formula. The formula is typically of the form `an+b`, where `a` and `b` are integers and `n` is the index of the element.

Examples

1. Select every `<p>` element that is the second `<p>` element of its parent:

```css

p:nth-of-type(2) {

color: blue;

}

```

2. Select every `<p>` element that is an odd-numbered `<p>` element of its parent:

```css

p:nth-of-type(odd) {

background-color: lightgray;

}

```

3. Select every `<p>` element that is a multiple of 3 of its parent:

```css

p:nth-of-type(3n) {

font-weight: bold;

}

```

The `:nth-of-type` pseudo-class is particularly useful for applying styles to specific elements within a group of similarly typed elements, without being constrained by the order of all child elements. It is widely supported in modern browsers, making it a reliable tool for CSS developers.