jquery - nth-child(1) がすべての子に適用されるのはなぜですか?

Question

この非常に基本的な HTML 構造に基づいています。

<div>This is a cube</div>
<div>This is a triangle</div>
<div>This is a big, green circle</div>

次のjQueryをセットアップしました。

$(document).ready(function () {

    $("div:nth-child(1)").addClass("cube-text text");
    $("div:nth-child(2)").addClass("triangle-text text");
    $("div:nth-child(3)").addClass("circle-text text");

    $("div:nth-child(1)").wrap("<div class='cube shape'></div>");
    $("div:nth-child(2)").wrap("<div class='triangle shape'></div>");
    $("div:nth-child(3)").wrap("<div class='circle shape'></div>");

    $(".shape").wrap( "<div class='inner'></div>" );
    $(".inner").wrap( "<div class='outer'></div>" );
    $(".outer").wrap( "<div class='column'></div>" );

    $(".outer:nth-child(1)").addClass("cube-anim");
    $(".outer:nth-child(2)").addClass("triangle-anim");
    $(".outer:nth-child(3)").addClass("circle-anim");
});

何らかの理由で、最後の 3 行が意図したとおりに機能していないようです。前の行で作成された「.outer」div の連続するインスタンスに、対応するクラスを追加することになっています。この特定の構文のさまざまな代替手段を使用してみました...

div .outer:nth-child

.column .outer:nth-child

.column:nth-child

そして、他のいくつかは、試行錯誤のような試みで、望ましい結果を得ようとしています.

各「.outer」コンテナー div に、@keyframe ベースのアニメーションをレンダリングするために CSS3 によって呼び出される追加のクラスを持たせようとしています。

ここに jsfiddle があります: http://jsfiddle.net/5NEPu/