CODEWITHSUNDEEP
csscss-selectors
Dariel Pratama
Dariel Pratama

Reputation: 1675

css check previous element classes

So, in my code i have the following possibilities:

<div class="price-box">
    <p class="was-old-price">$PRICE$</p>
    <p class="special-price">$PRICE$</p>
</div>

or

<div class="price-box">
    <p class="old-price">$PRICE$</p>
    <p class="special-price">$PRICE$</p>
</div>

I want when .was-old-price get printed insted of .old-price, the .special-price has display:none properties. is this possible to achieve this using CSS?

Upvotes: 3

Views: 3960

Answers (1)

James Donnelly
James Donnelly

Reputation: 128776

You can do that with the the Adjacent Sibling Combinator (+) selector:

.was-old-price + .special-price {
    display: none;
}

The E + F selector selects the F element immediately following the E element. In this case, the .special-price element immediately following the .was-old-price element. Here's an example:

.was-old-price + .special-price {
  display: none;
}
<h3>Box 1</h3>
<div class="price-box">
    <p class="was-old-price">was-old-price</p>
    <p class="special-price">special-price</p>
</div>

<h3>Box 2</h3>
<div class="price-box">
    <p class="old-price">old-price</p>
    <p class="special-price">special-price</p>
</div>

Upvotes: 8

Related Questions