Here is the structure that is causing the issue:
.parent-label {
display: flex;
flex: wrap;
flex-direction: column;
background-color: red;
:nth-of-type(2) {
background-color: green;
padding-left: 30px;
}
.child-label {
background-color: yellow;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
}
}<div class="parent-label">
<div class="child-label">child
</div>
<div class="child-label">
<div>
<span>test</span>
<a href="test">click</a>
</div>
<div>
<span>test</span>
<a href="test">click</a>
</div>
<div>
<span>test</span>
<a href="test">click</a>
</div>
</div>
</div>In this code snippet, there is a parent-label div that should contain 2 child-label divs.
The issue seems to be with the styling of the child-label, as it is not displaying the expected yellow background and the nth-of-type selector should turn it green.
Can anyone identify what might be wrong with the code?