このスパンが表示されている場合のみ、次の兄弟を選択する

Question

特定のスパンに特定の色を付ける必要があります。ただし、以前の兄弟に「display：block」がある場合に限ります。私はHTMLに直接アクセスすることはできませんので、これが私が扱える唯一のクラスです。

<div class="price-content"> 
    <span class="old-price"> 
    **<span class="new-price>** 
    <span class="percentage"> 
</div> 

私はこれをページ全体に繰り返し、「古い価格」はデフォルトでは表示されません。しかし時々それは "display：block"を持っています。 「旧価格」が表示されている場合のみ、「新価格」に特定の色を与えることはできますか？

Answer 1

、すべての.old-priceの要素を探します。 display：blockがある場合は、兄弟の.new-price要素を変更します。ここでは例です：

$(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、これを行うにはJavaScriptが必要です。簡単な解決策は、.old-price要素がdisplay: block（以下blockと呼ばれます）であるかどうかを表す新しいクラスを追加することです。 jQueryのを使用して

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