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 } });

Farid Rn · Accepted Answer · 2014-06-11 23:04:11Z

26

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 } });

edited Jun 11, 2014 at 23:04

answered Jun 11, 2014 at 22:58

Farid Rn

3,2076 gold badges42 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Zach Saucier Over a year ago

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

Hugolpz Over a year ago

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

Yuval A. Over a year ago

They should add a selector for this, IMO.

BoltClock Over a year ago

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.

Farid Rn Over a year ago

@BoltClock 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.

|

Collectives™ on Stack Overflow

CSS data attribute conditional value selector?

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related