nthlastchild

Nth-last-child is a CSS pseudo-class selector used to match elements based on their position within their parent’s list of children, counting from the end. It is written as :nth-last-child(an+b), where a and b are integers and n is an integer counter starting at 0. The expression selects elements whose distance from the end of the parent’s children matches the pattern an+b. For example, :nth-last-child(2) selects elements that are the second from the end.

Key points:

- It counts element siblings only (text nodes are not counted) and uses the parent’s child order.

- It does not filter by element type. If you want to count only siblings of a specific type, you would use :nth-last-of-type instead.

- The a n+b form allows various patterns, including simple calculations such as 2 or 2n, and can be combined with n ≥ 0.

Examples:

- li:nth-last-child(1) selects the last li in every parent that contains an li as its last child.

- p:nth-last-child(3) selects any p that is the third-to-last child of its parent.

- div > span:nth-last-child(2) targets a span that is the second-to-last child of its div parent.

Relation to other selectors:

- :nth-last-child counts from the end, whereas :nth-child counts from the start.

- :nth-last-child is not type-specific, unlike :nth-last-of-type, which counts only siblings of the same type.

Browser support: All major modern browsers support :nth-last-child without vendor prefixes, including Chrome, Edge, Firefox, and Safari. Usage can affect layout if the DOM order changes.