クラス名で最初のulに異なるスタイルを適用してください

Question

次のHTML構造を持っています。クラス名が「second class」の最初のulを選択し、同じクラス名で2番目のulと異なる幅を適用したいとします。

<div> 
    <div class='Link1'> 
     <a>Products</a> 
     <div class = 'firstClass'> 
      <ul class='secondClass'> 
       <li></li> 
       <li></li> 
      </ul> 
     </div> 
    </div> 
    <div class='Link1'> 
     <a>Tools</a> 
     <div class = 'firstClass'> 
      <ul class='secondClass'> 
       <li></li> 
       <li></li> 
      </ul> 
     </div> 
    </div> 
<div> 

私は以下のCSSを試していましたが、動作しませんでした。

Answer 1

CSSのみを使用すると、1つの要素に適用された後にルールが適用されなくなることはありません。これは基本的には

.Link1 > .firstClass > ul.secondClass:first-child 

というように、そのセレクタに一致するすべての要素に適用されます。

var firstMatch = document.querySelector('.Link1 > .firstClass > ul.secondClass:first-child'); 
firstMatch.className = firstMatch.className + ' additionalClass'; 

...そして、もちろん、あなたはあなたのCSSでadditionalClassのスタイルをする必要があると思います：

しかし、あなたは簡単にはJavaScriptを使用して最初の試合に別のクラスを適用することができます

jQueryのを使用して

.Link1 > .firstClass > ul.secondClass.additionalClass:first-child { 
    /* CSS here */ 
} 

、それは次のようになります。

$('.Link1 > .firstClass > ul.secondClass:first-child').first().addClass('additionalClass'); 

---

the original, not workingではなく、working exampleです。