CSS Nth-Child 3n階層構造

Question

私のHTMLがどのように構造化されているのですか？3n子を選択するのは苦労しています。 heroLetterの3nセレクタに気づいていないようですが、1n子セレクタを使用するとコードはクラスに気付きますが、すべてdivも選択します。私はどのように3n子のセレクターを私が作ったこのクラスの構造体で呼び出すか分からない。

コード：

.heroLetter { 
 
    float: left; 
 
    width: 48%; 
 
    margin-top: 150px; 
 
    text-align: center; 
 
    font-size: 600px; 
 
    color: #f5543a; 
 
    position: relative; 
 
} 
 
.windowWrapper .section .heroLetter:nth-child(3n) { 
 
    float: left; 
 
    width: 48%; 
 
    margin-top: 150px; 
 
    text-align: center; 
 
    font-size: 200px; 
 
    color: #f5543a; 
 
    position: relative; 
 
}

<div class="wrapper"> 
 
    <div id="section1" class="windowWrapper"> 
 
    <div class="section group"> 
 
     <h1 class="introH1"> 
 
       <span class="Grand">GRAND</span> 
 
       <span class="Stand">STAND</span> 
 
      </h1> 
 
     <p class="introP">A new font.</p> 
 
     <a href="#section2" class="arrowDown removeText">scroll down</a> 
 
    </div> 
 
    </div> 
 
    <div id="section2" class="windowWrapper"> 
 
    <div class="section group"> 
 
     <div class="col span_6_of_12"> 
 
     <h1>STORY</h1> 
 
     <p>Grandstand invokes</p> 
 
     </div> 
 
     <div class="heroLetter"> 
 
     G 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="section3" class="windowWrapper"> 
 
    <div class="section group"> 
 
     <div class="col span_6_of_12"> 
 
     <h1>PROCESS</h1> 
 
     <p>Grandstand invokes</p> 
 
     </div> 
 
     <div class="heroLetter"> 
 
     S 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="section4" class="windowWrapper form"> 
 
    <div class="section group"> 
 
     <div class="col span_6_of_12"> 
 
     <h1>BEAM</h1> 
 
     <p>Grandstand invokes</p> 
 
     </div> 
 
     <div class="heroLetter"> 
 
     <div class="circle"></div> 
 
     a 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

Answer 1

nth-childは、同じ親の子を指します。

最も一般的な外側の要素を参照するようにコードを調整できます。このような いくつかのCSSはあなたを助ける必要があります。この場合

.windowWrapper:nth-child(4n) .section .heroLetter {} 

を、それはあなたの第三heroLetter