span:nth-child(2n+1)
, without an <em>
inside the child elements. Children 1, 3, 5, and 7 are selected, as expected.
span:nth-child(2n+1)
, with an <em>
inside the child elements. Children 1, 5, and 7 are selected. 3 is used in the
counting because it is a child, but it isn't selected because it isn't a
<span>
.
span:nth-of-type(2n+1)
, with an <em>
inside the child elements. Children 1, 4, 6, and 8 are selected. 3 isn't
used in the counting or selected because it is an <em>
,
not a <span>
, and nth-of-type
only selects
children of that type. The <em>
is completely skipped
over and ignored.