CSS/Selectors/pseudo-classes/:nth-of-type
Pseudo-class :nth-of-type()
The :nth-of-type() pseudo-class represents an element that has an+b siblings with the same expanded element name before it in the document tree, for any zero or positive integer value of n, and has a parent element.
Syntax
selector:nth-of-type(an+b){ properties }
Point, Note
- The examples of an+b are as follows:
- :nth-of-type(2n) /* represents every even elements that has the same expanded element name */
- :nth-of-type(even) /* same, represents every even elements that has the same expanded element name */
- :nth-of-type(2n+1) /* represents every odd elements that has the same expanded element name */
- :nth-of-type(odd) /* same, represents every odd elements that has the same expanded element name */
- :nth-of-type(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.4. :nth-of-type() pseudo-class.