CSS/Selectors/pseudo-classes/:nth-last-of-type
Pseudo-class :nth-last-of-type()
The :nth-last-of-type() pseudo-class represents an element that has an+b siblings with the same expanded element name after it in the document tree, for any zero or positive integer value of n, and has a parent element.
Syntax
selector:nth-last-of-type(an+b){ properties }
Point, Note
- The examples of an+b are as follows:
- :nth-child(2n) /* represents every even elements that has the same expanded element name */
- :nth-child(even) /* same, represents every even elements that has the same expanded element name */
- :nth-child(2n+1) /* represents every odd elements that has the same expanded element name */
- :nth-child(odd) /* same, represents every odd elements that has the same expanded element name */
- :nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, elements that has the same expanded element name */
Example
[style.css]
article img:nth-of-type(2n){ float: left; } article img:nth-of-type(2n+1){ float: right; }
[index.html]
<body> <article> <h1>This is a sample content.</h1> <p>This is a paragraph.</p> <img src="images/photo1.png" alt=""> <h1>This is a sample content.</h1> <p>This is a paragraph.</p> <img src="images/photo1.png" alt=""> <h1>This is a sample content.</h1> <p>This is a paragraph.</p> <img src="images/photo1.png" alt=""> </article> </body>
CSS defines the :nth-of-type() pseudo-class selector in 6.6.5.5. :nth-last-of-type() pseudo-class.