: not (: first-child) and: not (: first-of-type) does not work

Question

I have my own tree system. What I'm trying to do is give all parents an edge, with the exception of the first. 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 a background color, but the second .someContainer does not have a top margin. If I remove :first-of-type , it will work. :first-child doesn't work either.

Here are my jsfiddles:

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

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

Answer 1

This is because they are not brothers and sisters.

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>