Pseudo border, exclude every 3rd

Put pseudo border, but exclude every 3rd element (doesn't work)

by galivan

HTML

<div class="ctr">
  <div>
      <div></div>
    <div></div>
    <div></div>
    </div>
  <div>
     <div></div>
    <div></div>
    <div></div>
  </div>
</div>

CSS

.ctr > div div{
  float:left;
  width:100px;
  height:100px;
  background:black;
  /*border:green 3px solid; */
}
.ctr > div:after{
  content:"";
  display:block;
  clear:both;
}
.ctr > div div{
  position:relative;
}

/* only if I remove ":not(:nth-child(3))" , the pseudo selector will appear: */
.ctr > div div:before:not(:nth-child(3)){
   content: "";
  display: block;
  z-index: 2;  
  position: absolute;
  left:0;
  right:0;
  bottom:0;
   top:0;
   height: 100%;
   width: 100%;
  border-right: 0.35em red solid;
  border-bottom: 0.35em red solid;
}