Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS: nth-child(even) but not divisible by 3

I'm trying to add different styles to every even DIV so long as it's not divisible by 3. So the second div gets padding, the fourth div gets padding, but the sixth is skipped over. Is this possible with CSS only?

The reason I'm doing this is that I'm snapping from a two column grid, to a three column grid on desktop and I need to overwrite 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;
    }
}
like image 304
Jason Avatar asked Nov 30 '22 01:11

Jason


1 Answers

You may exclude those with :not() selector, 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>
like image 103
LcSalazar Avatar answered Dec 04 '22 08:12

LcSalazar