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?
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.
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 {}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.