: 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 имеет цвет фона, но второй .someContainer не имеет верхнего поля. Если я удалю :first-of-type, он будет работать. :first-child тоже не работает.

Здесь мои jsfiddles:

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

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

Ответы

Ответ 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>