:nth-last-child() - HTML CSS CSS Selector

HTML CSS examples for CSS Selector:nth-last-child

  1. HOME
  2. HTML CSS
  3. CSS Selector
  4. nth-last-child

Description

The :nth-last-child(n) selector selects the nth element regardless of type counting from the last within its parent.

n can be a number, a keyword, or a formula.

:nth-last-of-type() selector selects the the nth element of a specified type counting from the last with its parent.

You can use odd and even to match child elements whose index is odd or even.

The following code shows how to select two different background colors for odd and even p elements, counting from the last child.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
p:nth-last-child(odd) {
    background: red;
}

p:nth-last-child(even) {
    background: blue;
}
</style><!--  ww w .j av a2 s  .com-->
</head>
<body>

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>

</body>
</html>

Related Tutorials