:not(:first-child) and :not(:first-of-type) not working

Question

I have sort of a tree system. What I'm trying to do is give all the parents a margin except for the first one. This is my 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> 

And my 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; } 

Now, my .someContainer has got the background color but the 2nd .someContainer doesn't have a top margin. If I remove the :first-of-type it works. :first-child doesn't work either.

Here's my jsfiddles:

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

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

Answer 1

That's because they are not siblings.

If you change the :not selector to the parent div, it will work.

.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>