html - Can't fix nth-child margin -

i have amount of divs class "box" floated next eachother. every 4n+1 th div has left margin push lot away border using nth-child(4n+1) selector. there can infinite amount of divs class "box".

problem in cases div class "special" dynamically added after 4n-th element. of course causes next box-divs lose wanted position. tried nth-of-type without succes.

<div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="special"></div> <div class="box"></div> 

css nth-child:

 .box:nth-child(4n+1){   margin-left:25px;    } 

as i'm not familiar nth-child , nth-of-type selector. i'm pretty sure i'm overlooking something. adding class each 4n+1 box-div not option. i'm looking css-solution

example without "special" div

example "special" div

edit: answer yet provided managed solve 1 row after special div. net yet multiple: example multiple rows after "special"

hoping browser compatibility possible.

how about

.special + .box,  .box:nth-child(4n+1) {     margin-left:25px; } 

demo : http://jsfiddle.net/vdjmc/6/

if change

<div class="special"></div> 

to else like

<p class="special"></p> 

then following code want (doesn't work till ie8)

.special + .box,  .box:nth-of-type(4n+1) {     margin-left:25px; } 

demo - http://jsfiddle.net/vdjmc/11/