Revision 26879 of :nth-of-type

  • Revision slug: CSS/:nth-of-type
  • Revision title: :nth-of-type
  • Revision id: 26879
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment new page

Revision Content

{{ CSSRef() }} {{ Fx_minversion_header("3") }}

Summary

The :nth-of-type pseudo-class matches an element that has <tt>an+b-1</tt> siblings with the same element name before it in the document tree, for a given positive or zero value for <tt>n</tt>, and has a parent element. See {{ Cssxref(":nth-child") }} for a more thorough description of the syntax of its argument.

Syntax

element:nth-of-type(an + b) { style properties }

Examples

Example

This example causes the positions of floated images to alternate between right and left.

  img:nth-of-type(2n+1) { float: right; }
  img:nth-of-type(2n) { float: left; }

See also

Revision Source

<p> {{ CSSRef() }}
{{ Fx_minversion_header("3") }}
</p>
<h3 name="Summary"> Summary </h3>
<p>The <code>:nth-of-type</code> pseudo-class matches an element that has <tt><i>a</i>n+<i>b</i>-1</tt> siblings with the same element name before it in the document tree, for a given positive or zero value for <tt>n</tt>, and has a parent element. See {{ Cssxref(":nth-child") }} for a more thorough description of the syntax of its argument.
</p>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">element:nth-of-type(<i>a</i>n + <i>b</i>) { <i>style properties</i> }
</pre>
<h3 name="Examples"> Examples </h3>
<h4 name="Example">Example</h4>
<p>This example causes the positions of floated images to alternate between right and left.
</p>
<pre>  img:nth-of-type(2n+1) { float: right; }
  img:nth-of-type(2n) { float: left; }
</pre>
<h3 name="See_also"> See also </h3>
<ul><li> {{ Cssxref(":nth-child") }}
</li><li> <a class="external" href="http://www.w3.org/TR/css3-selectors/#nth-of-type-pseudo">CSS3 Reference</a>
</li></ul>
Revert to this revision