View source for CSS/Selectors/pseudo-classes/:nth-last-child

<div style='float: right;background: white;border:1px dashed black;padding: 1ex;margin-left: 1ex;'>

* [[CSS/Selectors|CSS Selectors]]
** [[CSS/Selectors#Dynamic_pseudo-classes|Dynamic pseudo-classes]]
*** [[CSS/Selectors/pseudo-classes/:link|:link ]]
*** [[CSS/Selectors/pseudo-classes/:visited|:visited ]]
*** [[CSS/Selectors/pseudo-classes/:hover|:hover ]]
*** [[CSS/Selectors/pseudo-classes/:active|:active ]]
*** [[CSS/Selectors/pseudo-classes/:focus|:focus ]]
** [[CSS/Selectors#The_target_pseudo-class|The target pseudo-classes]]
*** [[CSS/Selectors/pseudo-classes/:target|:target ]]
** [[CSS/Selectors#The_language_pseudo-class|The language pseudo-classes]]
*** [[CSS/Selectors/pseudo-classes/:lang|:lang ]]
** [[CSS/Selectors#The_UI_element_states_pseudo-classes|The UI element states pseudo-classes]]
*** [[CSS/Selectors/pseudo-classes/:enabled|:enabled ]]
*** [[CSS/Selectors/pseudo-classes/:disabled|:disabled ]]
*** [[CSS/Selectors/pseudo-classes/:checked|:checked ]]
** [[CSS/Selectors#Structural_pseudo-classes|Structural pseudo-classes]]
*** [[CSS/Selectors/pseudo-classes/:root|:root ]]
*** [[CSS/Selectors/pseudo-classes/:nth-child|:nth-child ]]
*** [[CSS/Selectors/pseudo-classes/:nth-last-child|:nth-last-child ]]
*** [[CSS/Selectors/pseudo-classes/:nth-of-type|:nth-of-type ]]
*** [[CSS/Selectors/pseudo-classes/:nth-last-of-type|:nth-last-of-type ]]
*** [[CSS/Selectors/pseudo-classes/:first-child|:first-child ]]
*** [[CSS/Selectors/pseudo-classes/:last-child|:last-child ]]
*** [[CSS/Selectors/pseudo-classes/:first-of-type|:first-of-type ]]
*** [[CSS/Selectors/pseudo-classes/:last-of-type|:last-of-type ]]
*** [[CSS/Selectors/pseudo-classes/:only-child|:only-child ]]
*** [[CSS/Selectors/pseudo-classes/:only-of-type|:only-of-type ]]
*** [[CSS/Selectors/pseudo-classes/:empty|:empty ]]
** [[CSS/Selectors#The_negation_pseudo-classes|The negation pseudo-classes]]
*** [[CSS/Selectors/pseudo-classes/:not|:not ]]

</div>

= Pseudo-class :nth-last-child() =

The :nth-last-child() pseudo-class represents an element that has ''an+b'' siblings after it in the document tree, for any positive integer or zero value of n, and has a parent element.

== Syntax ==
<pre>
selector:nth-last-child(an+b){ properties }
</pre>


== Point, Note ==
*The examples of ''an+b'' are as follows:
** :nth-last-child(odd)    /* represents all odd foo elements in their parent element, counting from the last one */
** :nth-last-child(-n+2)    /* represents the two last elements */


== Example ==
[style.css]
  tr:nth-last-child(2n){
    background-color: yellow;
  }


[index.html]
<pre>
<body>
  <table>
    <tr><td>This is first row.</td></tr>
    <tr><td>This is second row.</td></tr>
    <tr><td>This is third row.</td></tr>
    <tr><td>This is fourth row.</td></tr>
  </table>
</body>
</pre>

[[File:Css3_selectors_nth-last-child.png‎]]

CSS defines the :nth-last-child() pseudo-class selector in [http://www.w3.org/TR/css3-selectors/#nth-last-child-pseudo 6.6.5.3. :nth-last-child() pseudo-class].