I have a complex structure with nested divs and classes. The hierarchy is as follows: row-container, row, row-content, col, and col-inner.
Objective: I aim to target only the "col" class on the second level of the "box" class, while disregarding the first and subsequent levels.
Below is the cleaned HTML markup, followed by the working CSS code and two expected CSS versions that are currently not functional.
Working CSS:
.box > .row-content > .col > .col-inner > .row-container > .row > .row-content > .col {
/* css stuff */
}
Expected CSS 1: (not working)
.box > .row-content:nth-of-type(2) > .col {
/* css stuff */
}
Expected CSS 2: (not working)
.box > .row-content > .row-content > .col {
/* css stuff */
}
HTML Code
<div class="box row">
<div class="row-content">
<div class="col"> <!-- IGNORE THIS COL -->
<div class="col-inner">
<div class="row-container">
<div class="row">
<div class="row-content">
<div class="col"> <!-- TARGET COL -->
<div class="col-inner">
<!-- do stuff -->
</div>
</div>
<div class="col"> <!-- TARGET COL -->
<div class="row">
<div class="row-content">
<div class="col"> <!-- IGNORE THIS COL -->
<div class="col-inner">
<!-- do stuff -->
</div>
</div>
<div class="col"> <!-- IGNORE THIS COL -->
<div class="col-inner">
<!-- do stuff -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Any assistance or suggestions would be greatly appreciated!