Изменить на складе / на складе цвет текста

Question

Одиночная страница товара отображается на складе / на складе; оба текста = красный. Мне нужно изменить На складе = зеленый, а на складе нет красного.

Помощь была бы отличной!

Answer 1

Невозможно сделать это только с помощью CSS, но вы можете сделать это с помощью JavaScript и API.

Например, это HTML

<div>
   <p class="stock">Stock</p>
</div>

JavaScript


var stock = document.querySelector('.stock');
    function countProducts(){
            fetch('http://127.0.0.1:8000/stock')
            .then(function(response) {
                return response.json();
            })
            .then(function(myJson) {
                if (myJson != 0) {
                    stock.style.color= 'green';
                 }else{
                    stock.style.color = 'red';
                }
            });
    }

Но если вы хотите знать, как это сделать в css. Это так

HTML

   <div>
       <p class="stock">Stock</p>
       <p class="NoStock"> No Stock </p>
    </div>


    //If there is a stock
    .stock{
     color: 'green';
     display: inherit;
    }

    .noStock{
      color: 'red';
      display : 'none';
    }

    //If there is  not a stock

    .noStock{
     color: 'red';
     display: 'inherit';
    }

    .stock{
     color: green;
     display: 'none';
    }

Answer 2

Разобрался.

p.stock.out-of-stock {
    color: #ff0000 !important;
}

и

p.stock.in-stock {
    color: #ff0000 !important;
}

в пользовательский CSS и соответствующим образом корректируем шестнадцатеричный код.

Не уверен, как удалить мой вопрос, но, возможно, это поможет кому-то еще.