CSS data attribute conditional value selector?

Question

Given html such as :

<div data-points="800">Jonh</div>
<div data-points="200">Jack</div>
<div data-points="1200">Julian</div>

How to select elements were the value is superior to 1000 (x>1000) ?

Preference : via CSS selectors. If no such thing, then I will re-ask for a JQuery / JS answer.

---

Eventually used :

var x = 1000;
$("div").each(function() {
    if ($(this).attr('data-points') > x) {
        $(this).addClass('larger-than-x'); // Or whatever
    }
});

Dithionite

Answer 1

With CSS you can select elements with their attributes:

div[data-points] {  }

or the value of their attributes:

div[data-points="800"] {  }

but you can't use conditions in CSS.
I would recommend you to use a javaScript solutions for this problem which can be so easy, for example, using jQuery you can do something like:

$("div[data-points]").each(function() {
    if ($(this).attr('data-points') > 1000) {
        $(this).addClass('larger-than-1000'); // Or whatever
    }
});

Bremser

This is the only way to do it but at this point you may as well manually add the class IMO – Bilestone

Cool. Would do a great combo with localStorage. I validate the answer as it seems to be the only way to proceed :] – Dithionite

They should add a selector for this, IMO. – Chestonchest

How would such a selector even work? You'd have to assume the value is always numeric. What if the value reflected in the markup isn't numeric? Also, what if the value in the selector isn't numeric? Should it match nothing, or be invalid? These are all things you have to consider when proposing a selector. – Tiv

@Tiv I just proposed a simple solution to a question that wanted to check the numbers. In real life you always have to validate the attribute selection results. – Bremser

My bad, I was talking to Yuval A. but didn't want to ping them over something like this. – Tiv

@YuvalA. Yet another way CSS is an abomination. Perfectly reasonable feature and it can only be implemented by a standards committee. – Macklin