[解決済み] :not(:first-child) と :not(:first-of-type) が機能しない。

質問

私はツリーシステムのようなものを持っています。最初の親を除いて、すべての親にマージンを与えようとしています。これは私のHTMLです。

<div id="someDivID">
    <div class="theBody">
        <div class="someContainer">
            <div id="someItem" class="someItemClass">
                Test
            </div>
        </div>
        <div class="someContainer">
            <div id="someItem2" class="someItemClass">
                Test2
            </div>
        </div>
    </div>
</div>

そして私のCSS。

#someDivID
{
    width: 400px;
}

#someItem,
#someItem2
{
    border: 1px solid #000;
    padding: 1px;
    margin-bottom: 2px;
    clear: both;
    overflow: auto;
}

.someItemClass
{
    background-color: #0077FF;
}

.someItemClass:not(:first-of-type)
{
    margin-top: 50px;
}

さて、私の .someContainer は背景色を持っていますが、2番目の .someContainer には上部の余白がありません。もし :first-of-type と表示され、動作します。 :first-child もうまくいきません。

これが私のjsfiddlesです。

と first-of-type : http://jsfiddle.net/JoshB1997/zsu2o3cg/

と first-child : http://jsfiddle.net/JoshB1997/zsu2o3cg/1/

解決方法は？

それは、兄弟姉妹でないからです。

:notセレクタを親divに変更すれば、うまくいきます。

.someContainer:not(:first-of-type)
{
    margin-top: 50px;
}

#someDivID
{
    width: 400px;
}

#someItem,
#someItem2
{
    border: 1px solid #000;
    padding: 1px;
    margin-bottom: 2px;
    clear: both;
    overflow: auto;
}

.someContainer
{
    background-color: #0077FF;
}

.someContainer:not(:first-of-type)
{
    margin-top: 50px;
}

<div id="someDivID">
    <div class="theBody">
        <div class="someContainer">
            <div id="someItem" class="someItemClass">
                Test
            </div>
        </div>
        <div class="someContainer">
            <div id="someItem2" class="someItemClass">
                Test2
            </div>
        </div>
    </div>
</div>