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?

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

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.