Add logic to CSS

Question

I would like to use logic in my CSS. Styles need to be applied only if a product ID is higher than a specific number, e.g:

if (data-product-id > 25) {
  padding: 50px;
}

Is this possible with CSS?

You generally want to use JavaScript to apply a certain class to the items you need to display differently — bryan60, Apr 25 '20 at 22:48
Usually, we ask for minimum viable code to create a solution. With SASS/LESS you can do it, but it's a *lot* easier with JS/jQuery. — Joel Hager, Apr 25 '20 at 23:25

score 0 · Answer 1 · answered Apr 25 '20 at 22:49

No, it isn't. Attribute selectors are based on simple string matching. There is no provision for less than / greater than numerical comparisons.

The closest you could get with CSS itself would be something like:

[data-product-id="25"],
[data-product-id="26"],
[data-product-id="27"],
/* etc */

This sort of thing is better handled with JS or server-side code which adds classes to elements.

score 0 · Answer 2 · answered Apr 25 '20 at 23:01

You can apply some limited logic of the like you were asking about in CSS, but I advise against it. Nevertheless, the answer below is an answer, it's better to implement your logic in Javascript.

Assuming that you have a class called data-product for all your data products, you can create this rule:

.data-product {
    padding: 50px;
}

.data-product[data-product-id="1"],
.data-product[data-product-id="2"],
.data-product[data-product-id="3"],
.data-product[data-product-id="4"],
.data-product[data-product-id="5"],
.data-product[data-product-id="6"],
.data-product[data-product-id="7"],
.data-product[data-product-id="8"],
.data-product[data-product-id="9"],
.data-product[data-product-id="10"],
.data-product[data-product-id="11"],
.data-product[data-product-id="12"],
.data-product[data-product-id="13"],
.data-product[data-product-id="14"],
.data-product[data-product-id="15"],
.data-product[data-product-id="16"],
.data-product[data-product-id="17"],
.data-product[data-product-id="18"],
.data-product[data-product-id="19"],
.data-product[data-product-id="20"],
.data-product[data-product-id="21"],
.data-product[data-product-id="22"],
.data-product[data-product-id="23"],
.data-product[data-product-id="24"],
.data-product[data-product-id="25"] {
    padding: 25px;
}

Add logic to CSS

2 Answers2