CSS Nth-Child 3n hierarchy structure - html

Question

With how my HTML is structure I am having hard time selecting 3n child. It doesn't seem even notice the 3n selector of class heroLetter, but if I use the 1n child selector the code notices the class, but it also selects every div. I am not sure how to call the 3n child selector with this structure of classes I have made.
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>
scroll down
</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

The nth-child refers to children of the same parent only.
You could adjust your code to refer to the outer most common element.
Some css like this should help you:
.windowWrapper:nth-child(4n) .section .heroLetter {}
In this case it's the 4th windowWrapper since it contains your 3rd heroLetter