:nth-child 定位嵌套的 div

Question

I'm having trouble finding a way to do this. This is my structure:

<div class="flex_container">
    <div class="flex_item_9">
        <div class="flex_label">First Label</div>
        <div class="flex_data">Some Data</div>
    </div>
    <div class="flex_item_9">
        <div class="flex_label">Second Label</div>
        <div class="flex_data">Some Data</div>
    </div>
    <div class="flex_item_9">
        <div class="flex_label">Third Label</div>
        <div class="flex_data">Some Data</div>
    </div>
</div>

This div structure gets repeated in a PHP While Loop as it is pulled from a database. On the desktop, I'd like to hide the flex_label div after the first one is displayed. I only want to show the labels once for each while loop. I figured :nth-child would work, so I tried the following in my CSS.

div.flex_container .flex_label:nth-child(2) {
      display: none;
}

But, had no results. Nothing changed in the browser. All flex_labels were displayed.

Is this something that can be handled in CSS, or will i need to incorporate something into my while loop to add additional classes to each DIV block?

EDIT

If there were 3 items to display:

 <div class="flex_container"> <div class="flex_item_9"> <div class="flex_label">SHOW LABEL</div> <div class="flex_data">Some Data</div> </div> <div class="flex_item_9"> <div class="flex_label">SHOW LABEL</div> <div class="flex_data">Some Data</div> </div> <div class="flex_item_9"> <div class="flex_label">SHOW LABEL</div> <div class="flex_data">Some Data</div> </div> </div> <div class="flex_container"> <div class="flex_item_9"> <div class="flex_label">* HIDE LABEL</div> <div class="flex_data">Some Data</div> </div> <div class="flex_item_9"> <div class="flex_label">* HIDE LABEL</div> <div class="flex_data">Some Data</div> </div> <div class="flex_item_9"> <div class="flex_label">* HIDE LABEL</div> <div class="flex_data">Some Data</div> </div> </div> <div class="flex_container"> <div class="flex_item_9"> <div class="flex_label">* HIDE LABEL</div> <div class="flex_data">Some Data</div> </div> <div class="flex_item_9"> <div class="flex_label">* HIDE LABEL</div> <div class="flex_data">Some Data</div> </div> <div class="flex_item_9"> <div class="flex_label">* HIDE LABEL</div> <div class="flex_data">Some Data</div> </div> </div>

My goal is to get this to display like a spreadsheet on a desktop. Single row of labels, and multiple rows of data. Mobile display will be different, but already working.

Answer 1

The following selectors should work:

/* flex_label inside flex_container that is 2nd (or 3rd or 4th or ...) child */
.flex_container:nth-child(n + 2) .flex_label {}


/* flex_label inside flex_container that follows a flex_container */
.flex_container ~ .flex_container .flex_label {}