Select elements whose numeric data attribute is in a given range in CSS

user_9421094 0
Viewed 164

I have multiple html elements with a numeric data attribute:

<div data-content="1"></div>
<div data-content="2"></div>
<div data-content="3"></div>
<div data-content="4"></div>
<div data-content="5"></div>
<div data-content="6"></div>

How can I select only some of these whose data attribute is between two numbers let's say 2 and 6. So I don't have to manually list them in CSS like this:

div[data-content="2"], div[data-content="3"], div[data-content="4"], div[data-content="5"], div[data-content="6"] {
  display: none;
}

I would like to do something like:

div[data-content="2-6"] {
  display: none;
}

Is there a shorthand syntax for this? Regex or something?

css html
4 Answers

Css is not consider by many as a programming Programming Language. This is not possible.

You can use SASS/SCC a CSS pre-processor.

//SASS
@for $i from 2 through 6
      div[data-content="#{$i})"]
Admin1

CSS cannot achieve the effect you desire.

As an alternative, you can use JavaScript to select the elements and apply the desired styles.

This can be achieved by storing the data-content values in an array and using JavaScript to generate a selector (with Array.map and Array.join) which you can use to select the elements (with querySelectorAll) and loop through (with Array.forEach):

const valuesToHide = ['1', '3', '6'];

const selector = valuesToHide.map(e => `div[data-content="${e}"]`).join(',');

console.log(selector)

document.querySelectorAll(selector).forEach(e => e.style.display = "none")
<div data-content="1">1</div>
<div data-content="2">2</div>
<div data-content="3">3</div>
<div data-content="4">4</div>
<div data-content="5">5</div>
<div data-content="6">6</div>

user_142512210

You can style a range of elements based on their order, but not on their data attributes:

div:nth-of-type(-n+6) {
  display: none;
}

div:nth-of-type(1) {
  display: block;
}
<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>

user_77243840

I created a form that has an event listener on the button. The form takes a minimum value and a max and will hide all divs containing numbers outside the range. 

function myFunction() {
  let lowerBound = parseInt(document.getElementById("lbound").value);
  let upperBound = parseInt(document.getElementById("ubound").value);
  let myElements = document.getElementsByTagName("div");
 
  for (const element in myElements) {
    if ((myElements[element].dataset.content >= lowerBound) && (myElements[element].dataset.content <= upperBound)) {
      myElements[element].style.display = "block";
    } else {
    myElements[element].style.display = "none";
    }
  }
};
<div data-content="1">1</div>
<div data-content="2">2</div>
<div data-content="3">3</div>
<div data-content="4">4</div>
<div data-content="5">5</div>
<div data-content="6">6</div>


  <label for="lbound">Lower Bound:</label><br>
  <input type="number" id="lbound" name="lbound"><br>
  <label for="ubound">Upper Bound:</label><br>
  <input type="number" id="ubound" name="ubound"><br>
  <button onclick="myFunction()"> 
    Highlight Values
</button>

user_156970670
Related