Basic example

by Jens Kühn

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type -->

<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;
}