CSS Susy Gallery - Center Last Row with nth-last-child

Question

I have a 4 column Susy CSS gallery grid that can contain any number of blocks. If the last row has less that 4 blocks I need it to be centred.

Using this css selector technique http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ I have been able to offset specific blocks as you can see in this pen: http://codepen.io/bennyb/pen/kXVaba

Using this code:

// 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);
}

As you can see it only works if there is less than 8 items. Does anyone know how I could improve this so it will work with any number of items, maybe with a SASS mixin.

Update

Here is updated CSS based on vals' answer:

// 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);
}

Nope...even a SASS Mixin will have to output CSS...and you are back where you started. — Paulie_D, Aug 12 '16 at 14:45

score 1 · Accepted Answer · answered Aug 12 '16 at 17:19

Don't know much about Susy, but let's see how you can target specific elements on the last row. The red selectors are only to shiow how it's working, and would be removed on production code

/* 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>

CSS Susy Gallery - Center Last Row with nth-last-child

1 Answers1