Question: I have been reading this [article](https://css-tricks.com/how-nth-child-works/) and it is pretty clear to me so far that something along the lines of: `ul li:nth-child(3n+3)` will select every 3rd `li` due to the fact that the "n" within the expression starts at zero and then represents a set of all positive integers; so n = 0, n = 1, n = 2, etc., which in the article I have linked goes on to indicate that indeed `:nth-child(3n+3)` is tantamount to (3x0)+3 which equals 3, (3x1)+3 equals 6 and so on. I have also seen similar CSS such as: `.some-selector:nth-child(1n); .some-selector:nth-child(2n);` 
What I glean from the examples from the aforementioned article leads me to posit that `.some-selector:nth-child(1n);` would equate to `.some-selector:nth-child(0);` but this also feels wrong to me. Can someone help me to better understand this? Thanks

Answer: 
`Xn` essentially means every Xth child, where `Xn+Y` is every Xth child with an offset of Y.

`1n` is quite nonsensical, as it will just select every child (every 1th child, which essentially is just every child).

```css
div:nth-child(1n)
{
  color: red;
}
```

```html
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
```

`2n` would be every 2nd child, starting with the second child ([0], 2, 4, 6, 8, 10, ...). Technically this would start with the zeroth child, but [there is no such thing in HTML/CSS](https://softwareengineering.stackexchange.com/questions/314537/why-does-nth-child-in-css-start-from-1-instead-of-0), so it's functionally equivalent to `2n+2`.

```css
div:nth-child(2n)
{
  color: red;
}
```

```html
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
```

`2n+1` would be every 2nd child, starting with the first child (1, 3, 5, 7, 9, ...).

```css
div:nth-child(2n+1)
{
  color: red;
}
```

```html
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
```

You can specify any Y value in `Xn+Y`, so if you wanted your every-other selector to start with the 4th element, it would be `2n+4`

```css
div:nth-child(2n+4)
{
  color: red;
}
```

```html
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
```

You can also specify a number in `nth-child` to directly select whichever child you want.

```css
div:nth-child(4)
{
  color: red;
}
```

```html
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
<div>Hi</div>
```
`.block:nth-child(1n)` will target every element with the class `block` that is a multiple of 1

So it will result the exact same thing as `.block{...}`

```css
.block {
  height: 50px;
  width: 50px;
  background: dodgerblue;
  margin: 3px;
}

.block:nth-child(1n) {
  background: red;
}
```

```html
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
```

If you want to select only the first one you can use the following

```css
body {
  display: flex;
  justify-content: space-around;
}

.block {
  height: 50px;
  width: 50px;
  background: dodgerblue;
  margin: 3px;
}

.first .block:nth-child(1) {
  background: red;
}

.second .block:nth-child(n+2) {
  background: red;
}
```

```html
<div class="first">
  Target only the first one
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
</div>

<div class="second">
  Target every block except for the first one
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
</div>
```