Q:

How to target individually nested elements using CSS

I'm trying to target each span individually in a structure like below. I've tried nth-child() & nth-of-type() but it didn't work, it was only applying the first style to all of the spans. Anyone no know how to do this without giving each a separate IDs?
<div>
  <div>
    <span></span>
  </div>
  <div>
    <span></span>
  </div>
  <div>
    <span></span>
  </div>
</div>

A:

try this
div > div:nth-of-type(n) > span {

}

where (n) will be number of the div

