.selector：not：nth-​​child（数式）のようなものがありますか？

Question

私はすべてのクラスを共有するセレクタのボックスを持っています。 widgetContainerは、次の行にドロップする前に1行に3つのdivを保持できます。私はnth-child(3n+0)を使用して、すべての3番目のdivの右側からマージンを取って、最初の2個に10個以上の余白を追加することができます（divがコンテナに正確に収まるようになります）。

しかし、nth-child(3n+0)をターゲットにして余白を削除する方法がある場合は、:not:nth-child(3n+0)のように余分な10ピクセルの余白を追加できるようにターゲットを設定しますか？これは私のCSSを同じに保つことを可能にし、擬似セレクタがサポートされていない場合、それは良く劣化します。

私はあなたに私のコードをお見せしましょう：

HTML

<div class="widgetContainer"> 
    <div class="widgetBox"> 
     <dt>Title</dt> 
     <dd>Lorem Ipsum..</dd> 
    </div> 
    <div class="widgetBox"> 
     <dt>Title</dt> 
     <dd>Lorem Ipsum..</dd> 
    </div> 
    <div class="widgetBox"> 
     <dt>Title</dt> 
     <dd>Lorem Ipsum..</dd> 
    </div> 
    <div class="widgetBox"> 
     <dt>Title</dt> 
     <dd>Lorem Ipsum..</dd> 
    </div> 
    <div class="widgetBox"> 
     <dt>Title</dt> 
     <dd>Lorem Ipsum..</dd> 
    </div> 
    <div class="widgetBox"> 
     <dt>Title</dt> 
     <dd>Lorem Ipsum..</dd> 
    </div> 
</div> 

CSS

.widgetBox { 
    width: 300px; 
    height: auto; 
    float: left; 
    margin: 30px 20px 10px 0; 
    border: 3px solid #e4e4e4; 
} 
.widgetBox:nth-child(3n+0) { 
    margin: 30px 0 10px 0; 
} 

On JSFiddle

私がCSSでできることは、widgetBoxの余白に30px 30px 10px 0がありますが、これはnth-childをサポートしていないブラウザでは機能しません。余白が削除されていないため、1行に2つのdivが必要です第3部から

さらに詳しい説明が必要な場合はお知らせください。

注 - これはjQueryを使用しないことになりますが、必要があれば私に教えてください。

Answer 1

一切ありませんselector..just 2つのスタイルを追加しない：

.widgetBox:nth-child(3n+1) { 
    margin: 30px 30px 10px 0; 
} 

.widgetBox:nth-child(3n+2) { 
    margin: 30px 30px 10px 0; 
}