## jQuery :nth-last-child() Selector The `:nth-last-child()` selector is a powerful jQuery filtering tool that targets elements based on their index position relative to their parent container, counting backward from the very last child element. --- ## Definition and Usage The `:nth-last-child(n)` selector matches elements that are the $n$-th child of their parent, regardless of their element type, starting the count from the bottom (the last child) and moving upward. ### Key Characteristics: * **1-Based Indexing:** The counting starts at `1` (which represents the last child). * **Type-Agnostic Counting:** It counts *all* sibling elements within the parent container, regardless of their tag name. If the element at the targeted index does not match the selector prefix, nothing is selected. * **Difference from `:nth-last-of-type()`:** Use the [`:nth-last-of-type()`](sel-nthlastoftype.html) selector if you want to count and select only elements of a *specific HTML tag type* from the end, ignoring other sibling elements. --- ## Syntax ```javascript $(":nth-last-child(n|even|odd|formula)") ``` ### Parameter Values | Parameter | Description | | :--- | :--- | | `n` | The index of the child element to match, counting from the last child.

**Note:** This must be an integer. The index of the last child is `1`. | | `even` | Selects all even-indexed child elements, counting from the bottom (e.g., 2nd to last, 4th to last, etc.). | | `odd` | Selects all odd-indexed child elements, counting from the bottom (e.g., last, 3rd to last, 5th to last, etc.). | | `formula` | An algebraic expression in the format of `an+b` to select elements based on a cycle.

*Example:* `p:nth-last-child(3n+2)` selects every 3rd paragraph, starting from the 2nd to last child. | --- ## Code Examples ### Example 1: Basic Index Selection Select the `

` element that is the 3rd child of its parent, counting from the last child: ```javascript // Selects the third child from the end, provided it is a

element $("p:nth-last-child(3)").css("background-color", "yellow"); ``` ### Example 2: Using "even" and "odd" Highlight alternating rows or elements starting from the bottom of the container: ```javascript // Selects all even-indexed elements from the bottom $("tr:nth-last-child(even)").addClass("highlight-even"); // Selects all odd-indexed elements from the bottom $("tr:nth-last-child(odd)").addClass("highlight-odd"); ``` ### Example 3: Using Algebraic Formulas (`an+b`) Select elements using a custom step pattern. For instance, selecting every 3rd element starting from the 2nd to last element: ```javascript // 'n' starts at 0, 1, 2... // When n=0: index is 2 (2nd from last) // When n=1: index is 5 (5th from last) $("li:nth-last-child(3n+2)").css("border-left", "3px solid red"); ``` --- ## Comparison: Understanding the Differences It is easy to confuse the various positional pseudo-class selectors. Here is a quick reference guide to help you choose the correct one: | Selector | Counting Direction | Filters by Type First? | Description | | :--- | :--- | :--- | :--- | | **`:nth-child(n)`** | Front to Back | No | Matches the $n$-th child of its parent. | | **`:nth-last-child(n)`** | Back to Front | No | Matches the $n$-th child of its parent, counting from the last child. | | **`:nth-of-type(n)`** | Front to Back | Yes | Matches the $n$-th child of its parent *of that specific element type*. | | **`:nth-last-of-type(n)`** | Back to Front | Yes | Matches the $n$-th child of its parent *of that specific element type*, counting from the last child. | ### Conceptual Example Consider the following HTML structure: ```html

``` * `$("p:nth-last-child(2)")` will select **Paragraph 2** because it is the 2nd child counting from the bottom (`` is 1st, `

Paragraph 2

` is 2nd). * `$("p:nth-last-child(1)")` will select **nothing** because the 1st child from the bottom is a ``, not a `

`. * `$("p:nth-last-of-type(1)")` will select **Paragraph 2** because it is the 1st `

` element counting from the bottom, ignoring the ``.