CSS Susy Gallery - n番目の最後の子を含む最後の行

Question

私は4列のSusy CSSギャラリーグリッドを持っており、任意の数のブロックを入れることができます。最後の行のブロックが4ブロックより少ない場合は、それを中心にする必要があります。

私はあなたがこのペンで見ることができるように特定のブロックを相殺することができたhttp://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/このCSSセレクタの技術使用：あなたが見ることができるように、それは場合にのみ機能します

// Total of 1 or 5 
ul li:first-child:nth-last-child(1), 
ul li:first-child:nth-last-child(5) + li + li + li + li { 
    @include push(4.5); 
} 

// Total of 2 or 6 
ul li:first-child:nth-last-child(2), 
ul li:first-child:nth-last-child(6) + li + li + li + li { 
    @include push(3); 
} 

ul li:first-child:nth-last-child(2) + li, 
ul li:first-child:nth-last-child(6) + li + li + li + li + li { 
    @include push(6); 
} 

// Total of 3 or 7 
ul li:first-child:nth-last-child(3), 
ul li:first-child:nth-last-child(7) + li + li + li + li { 
    @include push(1.5); 
} 

ul li:first-child:nth-last-child(3) + li, 
ul li:first-child:nth-last-child(7) + li + li + li + li + li { 
    @include push(4.5); 
} 

ul li:first-child:nth-last-child(3) + li + li, 
ul li:first-child:nth-last-child(7) + li + li + li + li + li + li { 
    @include push(7.5); 
} 

：このコードを使用してhttp://codepen.io/bennyb/pen/kXVaba

を8項目未満です。誰もがこれを改善する方法を知っていますので、多分SASSミックスインを使用していくつのアイテムでも動作します。

更新

はここヴァルス回答に基づいてCSSを更新されます

// One widow 
ul li:first-child:nth-last-child(1), 
ul li:first-child:nth-last-child(4n + 1) ~ li:nth-last-child(1) { 
    @include push(4.5); 
} 

// Two widows 
ul li:first-child:nth-last-child(2), 
ul li:first-child:nth-last-child(4n + 2) ~ li:nth-last-child(2) { 
    @include push(3); 
} 
ul li:first-child:nth-last-child(4n + 2) ~ li:nth-last-child(1) { 
    @include push(6); 
} 

// Three widows 
ul li:first-child:nth-last-child(3), 
ul li:first-child:nth-last-child(4n + 3) ~ li:nth-last-child(3) { 
    @include push(1.5); 
} 
ul li:first-child:nth-last-child(4n + 3) ~ li:nth-last-child(2) { 
    @include push(4.5); 
} 
ul li:first-child:nth-last-child(4n + 3) ~ li:nth-last-child(1) { 
    @include push(7.5); 
} 

Answer 1

はスージーについて多くを知っているが、あなたは最後の行の特定の要素をターゲットにすることができますどのように見てはいけません。赤いセレクターは、それが働いているかshiowするだけで、生産コードに除去される

/* target list with only 1 element in the last row */ 
 
li:first-child:nth-last-child(4n + 1) { 
 
    background-color: red; 
 
} 
 

 
/* target last element of list with only 1 element in the last row */ 
 
li:first-child:nth-last-child(4n + 1) ~ li:nth-last-child(1) { 
 
    background-color: blue; 
 
}

<ul> 
 
<li>1</li> 
 
<li>2</li> 
 
<li>3</li> 
 
<li>4</li> 
 
<li>5</li> 
 
<li>6</li> 
 
<li>7</li> 
 
<li>8</li> 
 
<li>9</li> 
 
</ul>

/* target list with 2 elements in the last row */ 
 
li:first-child:nth-last-child(4n + 2) { 
 
    background-color: red; 
 
} 
 

 
/* target last elements of list */ 
 
li:first-child:nth-last-child(4n + 2) ~ li:nth-last-child(2) { 
 
    background-color: green; 
 
}li:first-child:nth-last-child(4n + 2) ~ li:nth-last-child(1) { 
 
    background-color: blue; 
 
}

<ul> 
 
<li>1</li> 
 
<li>2</li> 
 
<li>3</li> 
 
<li>4</li> 
 
<li>5</li> 
 
<li>6</li> 
 
<li>7</li> 
 
<li>8</li> 
 
<li>9</li> 
 
<li>10</li> 
 
</ul>

/* target list with 3 elements in the last row */ 
 
li:first-child:nth-last-child(4n + 3) { 
 
    background-color: red; 
 
} 
 

 
/* target last elements of list */ 
 
li:first-child:nth-last-child(4n + 3) ~ li:nth-last-child(3) { 
 
    background-color: yellow; 
 
} 
 
li:first-child:nth-last-child(4n + 3) ~ li:nth-last-child(2) { 
 
    background-color: green; 
 
} 
 
li:first-child:nth-last-child(4n + 3) ~ li:nth-last-child(1) { 
 
    background-color: blue; 
 
}

<ul> 
 
<li>1</li> 
 
<li>2</li> 
 
<li>3</li> 
 
<li>4</li> 
 
<li>5</li> 
 
<li>6</li> 
 
<li>7</li> 
 
<li>8</li> 
 
<li>9</li> 
 
<li>10</li> 
 
<li>11</li> 
 
</ul>