Foolishmofo Foolishmofo - 7 months ago 12
HTML Question

CSS Nth-Child 3n hierarchy structure

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

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