-1

I was watching this video, it's a short demo for the Brackets IDE. I'm new to web development so I anticipate being confused by the code I see but there was something in there that I really don't get. Around the 8 minute mark the guy brings up the css line .galleryItem:nth-child(4n+1) Saying that it will only affect the first item in each row in a grid because of the :nth-child(4n+1) can some one please explain the syntax of this line and how it can be used.

P.S. For you Bret Victor fans out there, Brackets seems to do some of his stuff.

EasilyBaffled
  • 3,822
  • 10
  • 50
  • 87

1 Answers1

2

The idea here is simply that there are probably four items in each row, so using 4n+1 will affect the first item in each row because it is targeting 1st, 5th, 9th, etc. overall.

I think the 4n part can be thought of as a modulo division matcher (matches everywhere that mod 4 = 0) and the +1 simply shifts that 1 to the right. Thus it includes all the multiples of 4, each with 1 added. And since 0 is technically a multiple of 4, the 1st item is included in this list as well.

jm0
  • 3,294
  • 2
  • 16
  • 18