to ensure consistency

[cbbfcd]

Regarding point 4, about the ":not()".
your demo is:

.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

Sure, you can use .nav li + li or even .nav li:first-child ~ li, but with :not() the intent is very clear and the CSS selector defines the border the way a human would describe it.

but, in fact, .nav li + li or even .nav li:first-child ~ li, All indicate selectors other than the first element，
Therefore, in order to avoid readers' misunderstanding, you can change the selector in the demo to：

.nav li:not(:first-child) {
  border-right: 1px solid #666;
}

[AllThingsSmitty]

Thanks for the PR. I agree consistency is important and I don't want the reader to get tripped up. Because the scenario is familiar (last element needing something special), I'm more inclined to remove the "or even .nav li:first-child ~ li" from the last paragraph.

[cbbfcd]

Thanks for your reply, I very much agree and support your opinion

[cbbfcd]

I will launch a new PR and hope to remove this confusing point