CSS: nth-child (even) but not divisible by 3
I am trying to add different styles to each even DIV as long as it is not divisible by 3. So the second div gets padding, the fourth div gets padding, but the sixth is skipped. Is this only possible with CSS?
The reason I am doing this is because I am snapping from a two column grid to a three column grid on the desktop and I need to overwrite the mobile styles.
I don't want to use JavaScript.
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
<div> 5 </div>
<div> 6 </div>
<div> 7 </div>
@include breakpoint(mobile-wide) {
width: calc((2.5 / 6 * 100%) - 0rem + (2.5 / 6 * 0rem))
float: left;
margin-right: calc((0.5 / 6 * 100%) + 0rem + (0.5 / 6 * 0rem));
&:nth-child(2n) {
margin-right: 0;
float: right;
}
@include breakpoint(desktop) {
width: calc((3 / 12 * 100%) - 0rem + (3 / 12 * 0rem));
float: left;
margin-right: calc((1.5 / 12 * 100%) + 0rem + (1.5 / 12 * 0rem));
&:nth-child(3){
margin-right: 0;
float: right;
}
}
source to share
You can exclude those who have a selector :not()
using:nth-child(3n+3)
div:nth-child(even):not(:nth-child(3n+3)) {
padding-left: 30px;
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
source to share
Add a rule padding
for every even element and a reset padding for every sixth element. There is no need to complicate things.
See it here: http://jsfiddle.net/cjvk8z6u/
source to share
Well, it's pretty simple. You want to select the following sequence:
2, 4, 8, 10, 14, 16, ...
Pay attention to any pattern? Try again:
2, 8, 14, ... 4, 10, 16, ...
This means two sequences: starting at 2 and 4, having a gap of 6; they can be represented by the nth-child selector like this:
div {
font: medium monospace;
}
div:nth-child(6n + 2),
div:nth-child(6n + 4) {
background: #FC0;
}
<div>1</div>
<div>2*</div>
<div>3</div>
<div>4*</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8*</div>
<div>9</div>
<div>10*</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14*</div>
<div>15</div>
<div>16*</div>
<div>17</div>
<div>18</div>
<div>19</div>
<div>20*</div>
source to share