CSS/Selectors/pseudo-classes/:nth-of-type

From Web Education Community Group
< CSS‎ | Selectors
Jump to: navigation, search

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.