Geek asks and answers

Nth-child "collisions" in responsive fluid mesh design / design

I have a grid system for my site that was originally set up with a style that applies to every sixth element in the grid

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

I am making my site responsive and I have a breakpoint where I point

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

But the problem is that it still interprets the previous 5n + 1 style, which I don't want. How to tell CSS to ignore this style. Or even better, how to create a fluid grid, so that whenever the li element is the first in the line, it has a left edge from 0, and all the others have a margin of, say, 25px?

+5
source share
3 answers

, , -:

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

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

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

5n + 1 - , 5n + 1 3n + 1 - 15- .

, :nth-child() , 5n + 1 3n + 1 reset margin 5n + 1. , 3n + 1 , .

CSS, , . , , , .

+3

Try:

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

:not , , , .

, , , CSS. li:nth-child(5n+1) li:nth-child(3n+1) .

EDIT: @cimmanon - .

0

More articles:


All Articles