Select in a range

Recently I was scraping a thousand rows table, in this table I was only looking for a few lines. Of course I could do it easily with the scraping language, but I like to have a visual in the browser (and I am curious). The following solution is more in the "clever" side. For a KISS solution, I think that CSS may not be the best way to do that. That's said, let's go.

Our goal is to set pink as background-color of a range going from the third column to the seventh (i.e. start = 3 and end = 7).

expected

We will start with a MCVE, the HTML will be ol>li*9>{test}:

<ol>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ol>

To achieve our goal will use :nth-child():

The :nth-child() CSS pseudo-class matches elements based on their position among a group of siblings.

In fact, we will use it twice:

li:nth-child(n+3):nth-child(-n+7) {
    background-color: pink;
}

:nth-child(n+3): Represents the third and all following elements: 3 (0+3), 4 (1+3), 5 (2+3), etc. (i.e. [3..9])
:nth-child(-n+7): Represents the first seventh elements. 7 (-0+7), 6 (-1+7), 5 (-2+7), etc. (i.e. [7..1])

and

:nth-child(n+3):nth-child(-n+7): Represents the intersection of both (i.e [3..7])

li:nth-child(n+start):nth-child(-n+end) {
    background-color: pink;
}

Try it online!

source:

Tags: webdesign, css, scraping

← Back home