Henning Fischer Henning Fischer - 5 months ago 8
CSS Question

Select elements of last (dynamic) row?

I have a container and some rows. I give them margin-top with the * + * selector which works fine:

> * + * {
margin-top: 1em;
}


The Problem ist when I have columns inside this rows - how do I dynamically detect the last "row" of columns (kitten images) in my example with only css to delete their margin-bottom? I don't think there is a proper solution but maybe someone could tell me an alternative way to do this. Here is the pen:

http://codepen.io/herrfischer/pen/xOwmWZ

(Bootstrap grid).

Answer

Your lobotomized owl do not act on kittens margin because of >.

Just replace margin-bottom with margin-top and add

*:nth-child(-n+4){
    margin-top:0;
}

to remove margin-top from first 4 elements.

Example

Also I changed 1em with 2em to keep vertical / horizontal margins equal.

Comments