:nth-of-type(odd)は奇数番目の、:nth-of-type(even)は偶数番目の要素にスタイルシートを適用するCSS3のセレクタです。このとき、奇数と偶数のカウントは、直近の親要素内の要素の数で行われます。
サンプルAの場合、各図版をマークアップした<figure>は、それぞれ個別の<section>の中に記述してあり、親要素<section>の中ではすべての<figure>が「1つ目」とカウントされます。そのため、「article section figure:nth-of-type(odd)」と指定すると、すべての図版に設定が適用されてしまいます。
一方、<section>については、親要素<article>の中に3つ記述した形になっており、順に1つ目～3つ目とカウントされます。そのため、「article section:nth-of-type(odd)」と指定すると奇数番目の<section>に、「article section:nth-of-type(even)」と指定すると偶数番目の<section>に設定を適用することができます。
<article> <section> <figure>1枚目の画像</figure> </section> <section> <figure>2枚目の画像</figure> </section> <section> <figure>3枚目の画像</figure> </section> </article>
サンプルAの<article>、<section>、<figure>によるマークアップの親子関係。