CSS Nth-Child 3n Hierarchiestruktur

Question

Mit, wie meine HTML Struktur ist Ich habe harte Zeit 3n Kind auswählen. Es scheint nicht einmal die 3n Selektor der Klasse heroLetter zu beachten, aber wenn ich die 1n Kind-Selektor verwendet, bemerkt der Code die Klasse, aber es wählt auch alle div. Ich bin mir nicht sicher, wie ich den 3n Kindselektor mit dieser Struktur der Klassen anrufe, die ich gemacht habe.

Code:

.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

Die nth-child bezieht sich auf Kinder derselben Eltern nur.

Sie können Ihren Code so einstellen, dass er sich auf das am weitesten außen liegende Element bezieht.

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

Es ist der 4. windowWrapper In diesem Fall, da es Ihre dritte enthält heroLetter