1

Is there a way using CSS to target any DOM elements that have a class name with a numeric range? I have multiple DOM elements with the same class name and I want to hide all those apart from the first instance.

e.g. 

<div class="id-1"></div>
<div class="id-1"></div>
<div class="id-100"></div>
<div class="id-100"></div>
<div class="id-100"></div>
<div class="id-1000"></div>
<div class="id-1000"></div>
<div class="id-1000"></div>

AND then just show the first instance of each unique class name.

e.g.

<div class="id-1 hidden"></div>
<div class="id-1 hidden"></div>
<div class="id-100"></div>
<div class="id-100 hidden"></div>
<div class="id-100 hidden"></div>
<div class="id-1000"></div>
<div class="id-1000 hidden"></div>
<div class="id-1000 hidden"></div>

The caveat is I don't know what the class names will be before hand so I can't manually type them in my CSS file.

I am using LESS CSS so using a function may work.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
KoalaKid
  • 232
  • 2
  • 11
  • Are the number values totally random, or do they in fact all begin with 1? Is there anything else unique about the numerical values as a group? – Michael Benjamin Dec 31 '15 at 03:52
  • Yes the range could be anywhere from 1 to 300,000. It's based on the Id field from a MySQL table with a lot of rows. – KoalaKid Dec 31 '15 at 03:53
  • 1
    `div[class^="id-"]` will target all elements with a class attribute value that begins with `id-`, in case this applies to numbers only. – Michael Benjamin Dec 31 '15 at 03:55
  • Awesome. Thank you Michael. So then how would I show the first instance of each unique class? Div[class^="id="]:first-child ? – KoalaKid Dec 31 '15 at 03:58
  • I'm not sure of all cases you're gearing up for, but it works here: https://jsfiddle.net/gsknrfkw/ – Michael Benjamin Dec 31 '15 at 04:04
  • You could also select all elements *except* the first child with the *`:not`* negation pseudo-class... https://jsfiddle.net/gsknrfkw/1/ – Michael Benjamin Dec 31 '15 at 04:11
  • Hmm, can't seem to get either of your examples to show the first-child. I'm trying show the first : https://jsfiddle.net/ehuogc2r/1/ – KoalaKid Dec 31 '15 at 04:22
  • https://jsfiddle.net/cqe5va2q/ – KoalaKid Dec 31 '15 at 04:27
  • Can I have a DIV inside a SELECT statement? – KoalaKid Dec 31 '15 at 04:35
  • No. `select` can only have `option` or `optgroup` as child elements. – Michael Benjamin Dec 31 '15 at 04:36
  • http://stackoverflow.com/q/23666787/3597276 – Michael Benjamin Dec 31 '15 at 04:38
  • Hmm, OK that won't work either as I won't know the LABEL before hand either. Looks like I might have to tackle this with some PHP or JS. Thanks for your help Michael, much appreciated. – KoalaKid Dec 31 '15 at 04:44
  • I'm not totally convinced CSS can't do this, but I'm still at work and can't delve deeper into this right now. Maybe @BoltClock has some insight or a solution (no pressure ;-) I'll check back again later. Good luck. – Michael Benjamin Dec 31 '15 at 04:47
  • Thanks Michael. Learned something new anyway :) – KoalaKid Dec 31 '15 at 04:48
  • 1
    @Michael_B: http://stackoverflow.com/questions/25110777/css-selecting-all-elements-that-are-placed-immediately-after-an-element-with-a-d http://stackoverflow.com/questions/27664025/is-there-a-selector-for-2-or-more-consecutive-elements-with-the-same-attribute-v – BoltClock Dec 31 '15 at 05:03

1 Answers1

0

You need a prefix to select and filting all class by it. In this problem, i added prefix is 'id-'.

Add css

.hidden{
  display: none;
}

Add js

var container = document.getElementsByTagName('div');
var prefix = 'id-';
var kw = '';
for(var i = 0; i < container.length; i++){
  var currentClass = container[i].classList[0];
  if(currentClass.indexOf(prefix) > -1){
    if(kw === currentClass){
        console.log(currentClass);
        container[i].className = currentClass+" hidden";
    } else{
      kw = currentClass;
    }
  }

}
Vuong
  • 617
  • 11
  • 26