Advanced CSS/Jquery selector

Question

I have the following elements:

<div customAttribute="1" > element 1 </div>
<div customAttribute="1-1" > element 1-1 </div>
<div customAttribute="1-1-1" > element 1-1-1 </div>
<div customAttribute="1-1-2" > element 1-1-2 </div>
<div customAttribute="1-2" > element 1-2 </div>

How can I get the all elements with the customAttribute

1-1,
1-2,
...
1-n

but not

1-1-1,
1-1-2,
...
1-1-n

with a CSS selector?

possible duplicate of [wildcard \* in CSS for classes](http://stackoverflow.com/questions/5110249/wildcard-in-css-for-classes) — Antony, Jan 09 '15 at 02:25
@Antony That question is not the same as mine. In my case, I want to get all elements that matches with "1-" but I don't want get elements that matches with 1-* — Cristhian Boujon, Jan 09 '15 at 02:34
You will have to do it [the hard way](http://jsfiddle.net/2t8xosvx/1/) then. — Antony, Jan 09 '15 at 02:45
I know. And if they are indeed generated dynamically, you can just give them a class, or use jQuery. — Antony, Jan 09 '15 at 02:50

score 4 · Answer 1 · answered Jan 09 '15 at 02:58

4

As far as I understand you could use div[customAttribute^='1-']:not([customAttribute^='1-1-']). This will work with both jquery and css as you could see: http://jsfiddle.net/597y2e6r/1/

If that is not the case you need more complex pattern matching css might not be the best tool ... you could use filter instead.

answered Jan 09 '15 at 02:58

alexanderg

177
1
9

If there are `1-2-n` elements and `1-n-n` elements, then there's no other way than to repeat as many `:not()`s as necessary. The filter route would be best, if not modifying the HTML somehow. – BoltClock Jan 09 '15 at 05:21

Advanced CSS/Jquery selector

1 Answers1