## jQuery :nth-child() Selector
The `:nth-child()` selector is a powerful jQuery filter used to select elements based on their index position among their sibling elements, regardless of their type.
This selector is highly useful for styling alternating rows in tables, targeting specific items in lists, or applying styles to elements at regular intervals.
---
## Definition and Usage
The `:nth-child(n)` selector matches every element that is the $n$-th child of its parent, **regardless of its element type**.
> 💡 **Tip:** If you want to select the $n$-th child of a **specific type** (for example, only the 3rd `
` element among other sibling types), use the [`:nth-of-type()`](sel-nthoftype.html) selector instead.
---
## Syntax
```javascript
$(":nth-child(n|even|odd|formula)")
```
### Parameter Values
| Parameter | Description |
| :--- | :--- |
| `n` | The index of the child element to match.
Must be an integer. **Note:** The index is 1-based (the first child has an index of `1`). |
| `even` | Selects all even-indexed child elements (2nd, 4th, 6th, etc.). |
| `odd` | Selects all odd-indexed child elements (1st, 3rd, 5th, etc.). |
| `formula` | Specifies which child elements to select using an algebraic formula ($an + b$).
Example: `p:nth-child(3n+2)` selects every 3rd `
` element, starting from the 2nd child. |
---
## Code Examples
### 1. Basic Index Selection
Select every `
` element that is the **third child** of its parent element:
```javascript
$("p:nth-child(3)").css("background-color", "yellow");
```
### 2. Selecting Within a Specific Parent
Select every `
` element that is the **second child** of a `
` element:
```javascript
$("div p:nth-child(2)").css("border", "2px solid red");
```
### 3. Using "even" and "odd"
Apply alternating background colors to list items (often used for zebra-striping tables or lists):
```javascript
// Selects the 1st, 3rd, 5th, etc. list items
$("li:nth-child(odd)").css("background-color", "#f2f2f2");
// Selects the 2nd, 4th, 6th, etc. list items
$("li:nth-child(even)").css("background-color", "#e0e0e0");
```
### 4. Using Algebraic Formulas ($an + b$)
The formula syntax allows you to target elements in cycles:
* `a` represents the cycle size (multiplier).
* `n` is a counter starting at 0.
* `b` is the offset value.
Select every 3rd paragraph, starting from the 2nd child (`3n + 2` matches the 2nd, 5th, 8th, etc. elements):
```javascript
$("p:nth-child(3n+2)").css("font-weight", "bold");
```
---
## Key Differences to Keep in Mind
When working with structural pseudo-class selectors, it is easy to confuse similar filters. Here is a quick comparison:
| Selector | Description |
| :--- | :--- |
| `p:nth-child(2)` | Selects a `
` element only if it is the **second child** of its parent. If the second child is a `
` instead of a `
`, nothing is selected. |
| `p:nth-last-child(2)` | Same as `:nth-child(2)`, but counts **backward** from the last child. |
| `p:nth-of-type(2)` | Selects the **second `
` element** among its siblings, ignoring any non-`
` sibling elements. |
| `p:nth-last-of-type(2)` | Same as `:nth-of-type(2)`, but counts **backward** from the last sibling of that type. |
YouTip