jeudi 11 juillet 2019

Is it possible to have conditional if/else logic using traditional CSS (not using SASS or LESS etc.)

Basically I have a product grid page containing an item title, item description and item price.

When an item is free, the price shows as £0.00

However I wondered if there was a way I could get it to not show the price at all for free items.

The problem I have as well is that the system I am working in has very limited customisation options (CSS only)

So no JS, or PHP, or Pre-Processor CSS. Even the HTML can only be tweaked in certain parts.

So is it possible to achieve this is traditional CSS?

.outer-wrapper {
    width: 250px;
}

.title {
    border: 1px solid black;
    margin: 10px;
}

.description {
    border: 1px solid black;
    margin: 10px;
}

.price {
    border: 1px solid black;
    margin: 10px;
}
<div class="outer-wrapper">
    <div class="title">
        ITEM TITLE
    </div>

    <div class="description">
        Lorem ipsum dolor sit amet
    </div>

    <div class="price">
        &pound;0.00
    </div>
</div>

Aucun commentaire:

Enregistrer un commentaire