Search code examples
csscss-selectors

hide nth child items after multiple of 7

So I have items set out from a cms and no control over their number.

I want to use css to hide all items over a multiple of 7, but only the last few.

I.e. if there are 10 items I need to hide the last 3, if there are 22 items I need to hide the last one... (the remainder after dividing by 7).

I've tried a combination of nth child and nth last child, but haven't got close!

Solution

  • Sussed - useful for anyone else...

    li:nth-last-child(-n + 8) + li:nth-child(7n) ~ li{
  display: none;
}
    <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>
</ul>