:nth-child not counting elements correctly?

Question

css

There is markup

<span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>

And sass styles

span
  width: 40px
  height: 40px
  border-radius: 5px
  background: #F8A25D
  display: inline-flex
  justify-content: center
  align-items: center
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif
  color: #333
  font-weight: bold

  &:nth-child(3n + 2)
    border-radius: 50%

All this quite predictably selects every third element starting from the second result
The magic starts if you open this code on the local. The result will be like this

. The developer panel says that the selector worked. But it didn't work right. The markup is the same as in the codepen (except for the doctype and that's it). What the hell is going on?

Answer 1

Scripts are also children, so browsersync spoils your raspberries. You need nth-of-type, not nth-child.