Why is a second-child affected by my first-child color property?

Question

I was finishing up selectors and testing my knowledge and encountered a problem that makes no sense.

In theory, the code below should color all first children that

Answer 1

This is because you have nested lis.

The second inner li is being coloured red because it's inheriting that rule from the style applied to the first child outer li, ie its parent.

li:first-child { color: red; }
li:not(:first-child) { color: black; }

That will override the inheritance and result in the text of the first outer and inner lis being red. Fiddle

Alternatively, if you want to colour only the inner lis:

li li:first-child { color: red; }