nth-child "collisions" in a responsive design / creating a fluid grid

Question

I have a grid system for my site which was initially set up with a style applied to every sixth item in a grid

li:nth-child(5n+1){ margin-left:0 }

I'm in the process of making my site responsive, and I have a breakpoint where I specify

li:nth-child(3n+1){ margin-left:0 }

But the problem is that it is still interpreting the previous style of 5n+1, which I don't want. How do I tell CSS to ignore that style. Or better yet, how do I create a fluid grid so that whenever an li item is the first in a row, it has a margin-left of 0, and all others have a margin of, say, 25px?

Dacron

li { margin-left: 25px;} li:first-child { margin-left: }? – Doorstop

Unfortunately it is not possible to style a floated element that comes first in a new line. :first-child just addresses the first child in your html code, not in the displayed line. Did you try to reset the margin-left: 25px for the :nth-child(5n+1)? – Gabbey

You'll need to apply that margin (perhaps as a negative value) to a parent element. Take a look at how Twitter does it with Bootstrap. – Highroad

ZURB/Foundation does the same thing @Highroad mentions to handle its n-up block grid. you apply the same margin/padding to all the elements in the grid then you offset the container with an equal neg. margin, but that actual answer is you need to outrank it with specificity... – Knockout

The problem with resetting the margin on 5n+1 is I'm not sure whether 5n+1 supersedes 3n+1 or vice versa - because at the 15th element, those style rules will collide. – Dacron

Even if the styling for the :nth-child(3n+1) comes after the reset? – Gabbey

I'm not sure what you mean really with the negative margin / bootstrap - does anyone have a link? – Dacron

@mheavers: you need to do this with classes instead of jsut blanketing the li for example .three-up li:nth-child(3n+1) {} and .five-up li:nth-child(5n+1) {} – Knockout

Ah - so I would have to have breakpoints for every point in which the grid changes? – Dacron

@Dacron This demo might help: codepen.io/cimmanon/pen/dwbHi – Corby

Thanks cimmanon - if you want to pose this as answer I will accept it, as I think it solves my scenario the best. – Dacron

Answer 1

By using negative margins on a parent element, you can be responsive without needing media queries:

http://codepen.io/cimmanon/pen/dwbHi

.gallery {
  margin: -10px 0 0 -10px;
  overflow: hidden;
}

.gallery img {
    margin: 10px 0 0 10px;
    float: left;
}

Corby

i love the solution, but i hate the way we should apply hacks*, tricks* or whatever to accomplish simple things like this... maybe css should be rethinked* – Lug

Answer 2

The problem with resetting the margin on 5n+1 is I'm not sure whether 5n+1 supersedes 3n+1 or vice versa - because at the 15th element, those style rules will collide.

They are equally specific since you're only dealing with one :nth-child() selector per rule at a time, so you'll need to place the 5n+1 rule before the 3n+1 rule in your breakpoint, and reset the margin to whatever its non-zero value is within your 5n+1 rule. This way the 3n+1 rule will take precedence for an element that matches both rules.

There is no way to select the first item in a row using CSS because it doesn't have a clear idea of what the first item in a row is. If you know the exact margin to use and you don't have too many breakpoints to deal with, this is a good alternative.

Averell

Answer 3

Try:

li:nth-child(5n+1):not(:nth-child(3n+1)){ margin-left:0 }

The :not selector does what it says on the tin, and doesn't select elements which match the selector inside it's brackets.

Also, if two rules collide and neither have priority, the one that appears last in the CSS will be used. It might be simpler to just put li:nth-child(5n+1) after li:nth-child(3n+1) in the stylesheet.

EDIT: @cimmanon's comment on your question is a very good alternate method.

Genuflect

That would be :not(:nth-child(3n+1)) - the li is superfluous and would break the selector for CSS3 browsers. See #10712230 – Averell