HTML and CSS Reference
In-Depth Information
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>
</div>
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>
.
