nth-child vs nth-of-type

by jonahe

HTML

<a href="https://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/">difference between <pre>nth-child</pre> and <pre>nth-of-type</pre></a>
<span>
  <p>p1 is second element (first is link) that is a span</p>
  <span>c1 is second element (first is paragraph) that is a span</span> 
  <span>c2 is second span</span>
  <span>c3</span>
  <span>c4</span>
</span>
<span>
  <p>p2</p>
  <span>c1</span>
  <span>c2</span>
  <span>c3</span>
  <span>c4</span>
</span>
<span>
  <p>p3</p>
  <span>c1</span>
  <span>c2</span>
  <span>c3</span>
  <span>c4</span>
</span>

CSS

span {
  display: block;
}

span:nth-of-type(2) {
  font-weight: bold;  
}
span span {
  margin-left: 15px;
  font-weight: normal;
  color: black;
}



span:nth-child(2) {
  color: red;
}


pre {
  display: inline;
}