CODEWITHSUNDEEP
csscss-selectors
Maarten Wolfsen
Maarten Wolfsen

Reputation: 1733

CSS selector hop 1 element after 2 elements

So, I want some CSS values only on certain elements, like this:

2,3, 5,6, 8,9, 11,12 etc. (numbers being the elements)

I have googled alot, but I just can't find how to do it.

Upvotes: 0

Views: 38

Answers (2)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123387

Select all elements but not those who are :nth-child(3n + 1) 

:not(:nth-child(3n + 1))

so as to exclude elements in position 1,4,7,10...

Codepen Demo

Upvotes: 2

Harry
Harry

Reputation: 89750

You can use the nth-child selector with 3n and 3n+2 as the arguments. 3n selects all elements that are numbered 3, 6, 9, 12... whereas the 3n+2 selects elements that are numbered 2, 5, 8, 11..

li:nth-child(3n+2),
li:nth-child(3n) {
  color: red;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
</ul>

Upvotes: 2

Related Questions