Selecting the next sibling, only if this span is showing - html

Question

I need to give a certain span a specific color, but only when it's previous sibling has "display: block". I don't have direct access to the HTML so this are the only classes I can work with.
<div class="price-content">
<span class="old-price">
**<span class="new-price>**
<span class="percentage">
</div>
I have this all over the page repeating, "old-price" is hidden by default. But sometimes it has "display: block". How can I give "new-price" a specific color, only when "old-price" is displaying?

Answer 1

Using jQuery, look for all the .old-price elements. If they've got display:block, then modify their sibling .new-price element. Here's an example:
$(document).ready(function() {
$.each($('.price-content > .old-price'), function(i, el) {
$oldPrice = $(el);
if ($oldPrice.css('display') === 'block') {
$oldPrice.next('.new-price').css('color', 'purple');
// Or maybe do 'addClass' for semantic's sake
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price-content">
<span class="old-price" style="display: none">$5.98</span>
<span class="new-price">$5.15</span>
<span class="percentage">14%</span>
</div>
<hr />
<div class="price-content">
<span class="old-price" style="display: block">$5.98</span>
<span class="new-price">$5.15</span>
<span class="percentage">14%</span>
</div>

Answer 2

AFAIK, you need JavaScript to do this. A simple solution would be to add a new class that represents whether the .old-price element is display: block (called block below).
.old-price.block + .new-price {
color: red;
}
<div class="price-content">
<span class="old-price block">OLD PRICE</span>
<span class="new-price">NEW PRICE</span>
<span class="percentage">%</span>
</div>