5

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
mheavers
  • 29,530
  • 58
  • 194
  • 315
  • `li { margin-left: 25px;} li:first-child { margin-left: }`? – Marc B Mar 11 '13 at 17:42
  • 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)`? – Linus Caldwell Mar 11 '13 at 17:45
  • 1
    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. – isherwood Mar 11 '13 at 17:46
  • ZURB/Foundation does the same thing @isherwood 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... – prodigitalson Mar 11 '13 at 17:48
  • 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. – mheavers Mar 11 '13 at 17:49
  • Even if the styling for the `:nth-child(3n+1)` comes after the reset? – Linus Caldwell Mar 11 '13 at 17:51
  • I'm not sure what you mean really with the negative margin / bootstrap - does anyone have a link? – mheavers Mar 11 '13 at 17:52
  • @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) {}` – prodigitalson Mar 11 '13 at 17:52
  • Ah - so I would have to have breakpoints for every point in which the grid changes? – mheavers Mar 11 '13 at 17:53
  • 3
    @mheavers This demo might help: http://codepen.io/cimmanon/pen/dwbHi – cimmanon Mar 11 '13 at 17:57
  • Thanks cimmanon - if you want to pose this as answer I will accept it, as I think it solves my scenario the best. – mheavers Mar 11 '13 at 18:24

3 Answers3

12

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;
}
cimmanon
  • 67,211
  • 17
  • 165
  • 171
  • 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* – AgelessEssence Nov 05 '14 at 01:35
3

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
0

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.

Bill
  • 3,478
  • 23
  • 42
  • 1
    That would be `:not(:nth-child(3n+1))` - the `li` is superfluous and would break the selector for CSS3 browsers. See http://stackoverflow.com/questions/10711730/whats-the-difference-in-the-not-selector-between-jquery-and-css – BoltClock Mar 11 '13 at 18:09