селекторы first-child и nth-child в HTML5 теге "article" не применяются

Question

Я использую некоторые селекторы CSS2 и CSS3 для тега HTML5 <article>, но кажется, что некоторые (но не все) из них работают не так, как я ожидал.

Вот рабочий пример:

/* Working as expected: */
div.wrapper p:first-child { color: red; }
div.wrapper p:nth-child(even) { color: fuchsia; }

/* NOT working as expected: */
div.wrapper article:nth-child(1) { color: blue; }
div.wrapper article:first-child { color: green; }

/* Working as expected: */
div.wrapper article:last-child { color: gold; }

<div class="wrapper">
  <p>P1, expected "color: red"</p>
  <p>P2, expected "color: fuchsia"</p>
  <p>P3, expected no css applied</p>
  <p>P4, expected "color: fuchsia"</p>
  <article>Article 1, expected "color: green" and/or "color: blue" &larr; not working as expected...</article>
  <article>Article 2, expected "color: gold"</article>
</div>

Тогда моя проблема: почему не работают селекторы nth-child(n) и first-child на тегах <article>?И еще более странно: селектор last-child работает.Я тестировал в FF4, IE9 и Chrome11, все те же результаты.

Теги <p> выполняют функцию проверки работоспособности;чтобы увидеть, что селектор nth-child(n) работает для некоторых тегов.

Что мне не хватает?Мой образец должен работать вообще?

Answer 1

first-child выбирает тег, только если это первый дочерний тег его родительского тега.В вашем случае первый тег <article> является пятым тегом в целом.То же самое касается nth-child(n).Это относится не к одноуровневым тегам одного типа, но ко всем одноуровневым тегам.Из W3C:

Нотация псевдокласса: nth-child (an + b) представляет элемент, у которого в дереве документа есть родные элементы + b-1 перед ним, для любого положительного целого или нулязначение n и имеет родительский элемент.

Источник: http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

Answer 2

Элемент article в вашем примере является пятым, а не первым ребенком.:first-child и nth-child(1) выбирают первого потомка родителя .

Селектор :first-of-type (или :nth-of-type(1)), однако, выберет первый элемент типа article.