:nth-last-of-type() - HTML CSS CSS Selector

HTML CSS examples for CSS Selector:nth-last-of-type

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

Description

The :nth-last-of-type(n) selector selected the nth element of a particular type counting from the last child with its parent.

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

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

Example

You can use odd and even keywords to match child elements whose index is odd or even. The index of the first child is 1.

The following code shows how to select odd and even p elements.

Demo Code

ResultView the demo in separate window 

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

p:nth-last-of-type(even) {
    background: blue;
}
</style><!--from  w  w w  .j a v  a 2  s.co  m-->
</head>
<body>

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

</body>
</html>

Related Tutorials