HTML and CSS Reference
4. <article class=”abstract”> ... </article>
5. <article class=”abstract”> ... </article>
6. <blockquote><p> ... </p></blockquote>
7. <article class=”abstract”> ... </article>
8. <article class=”abstract”> ... </article>
9. <article class=”abstract”> ... </article>
The <blockquote> is child number 6 out of 9. If you used article:nth-child(2n)
as your selector to select all the even-numbered children of the <div> , you'd select
the <article> s in positions 2, 4, and 8. The <blockquote> (position number six)
wouldn't be selected because it is not an <article> .
If you used article:nth-of-type(2n) as your selector, you would select the
<article> is in positions 2, 4, 7, and 9. The reason is that this selects by the type of
element, not the child position. Therefore, in this case the <blockquote> is com-
pletely ignored and the even-numbered <article> s are selected. Yes, two of them
are odd numbered according to my original numbering scheme, because in reality
the <blockquote> exists and offsets their position. But article:nth-of-type(2n)
ignores the <blockquote> , effectively counting positions 7 and 9 as 6 and 8.
Here are a few other pseudo-classes to quickly consider:
only-child . Selects an element only if it is the only child of its parent—for
example, article:only-child wouldn't select anything in the preceding
example because there is more than one <article> child.
only-of-type . Selects an element only if it is the only sibling of its type
inside the parent element. For example, blockquote:only-of-type would
select the <blockquote> in the preceding example because it is the only
one of its type present.
empty . Selects an element only if it has no children whatsoever (including
text nodes). For example, div:empty would select <div></div> but not
<div>1</div> or <div><p>Hi!</p></div> .