Добавить лог c к CSS

Question

Я хотел бы использовать logi c в моем CSS. Стили необходимо применять только в том случае, если идентификатор продукта превышает указанное c число, например:

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

Возможно ли это с CSS?

Answer 1

Вы можете применить некоторые ограниченные логи c, как вы и просили в CSS, но я советую против этого. Тем не менее, ответ ниже - это ответ, лучше реализовать вашу логику c в Javascript.

Предполагая, что у вас есть класс data-product для всех ваших продуктов данных, вы можете создать это правило :

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

Answer 2

Нет, это не так. Селекторы атрибутов основаны на простом сопоставлении строк. Нет никаких условий для сравнений чисел меньше / больше.

Самое близкое, что вы могли бы получить с CSS, было бы что-то вроде:

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

Подобные вещи лучше обрабатываются с JS или кодом на стороне сервера, который добавляет классы к элементам.