Relawan kami belum menerjemahkan artikel ini ke dalam Bahasa Indonesia. Bergabunglah dan bantu kami menyelesaikan pekerjaan ini!
Anda juga bisa membaca artikel dalam English (US).

The :nth-of-type() CSS pseudo-class matches one or more elements of a given type, based on their position among a group of siblings.

/* Selects every fourth <p> element
   among any group of siblings */
p:nth-of-type(4n) {
  color: lime;
}

Syntax

The nth-of-type pseudo-class is specified with a single argument, which represents the pattern for matching elements.

See :nth-child for a more detailed explanation of its syntax.

Formal syntax

:nth-of-type( <nth> )

where
<nth> = <an-plus-b> | even | odd

Examples

Basic example

HTML

<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p>
  <p>2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p>3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>

CSS

/* Odd paragraphs */
p:nth-of-type(2n+1) {
  color: red;
}

/* Even paragraphs */
p:nth-of-type(2n) {
  color: blue;
}

/* First paragraph */
p:nth-of-type(1) {
  font-weight: bold;
}

Result

Specifications

Specification Status Comment
Selectors Level 4
The definition of ':nth-of-type' in that specification.
Working Draft Matching elements are not required to have a parent.
Selectors Level 3
The definition of ':nth-of-type' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 3.5 (1.9.1) 9.0 9.5 3.1
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 (Yes) 1.0 (1.9.1) 9.0 9.5 3.1

See also

Tag Dokumen dan Kontributor

 Terakhir diperbarui oleh: mfluehr,