How can I highlight an nth child by class rather than by order using only CSS selectors-CodePudding

In the example below, how might I highlight just the first class currentAnswer of both sectionquest groups without javascript using plain vanilla CSS in modern browsers? (So the #5 and #1 should just be yellow highlighted)

This question and it's references didn't quite answer a more complex html structure.

Notice it's not the first child.

<!DOCTYPE html>
<html>
<body>
  How can I highlight just the FIRST class currentAnswer of both groups without javascript?
  So the #5 and #1 should be highlighted only
  <div >
  <br/><br/>BREAKFAST<br/><br/>
  </div>
    <div  style="background:antiquewhite;">
        <div >
        </div>
        <div ></div>
        <div ></div>
        <div >
            <div >
                <div >
                    Q1: How many coffees did you drink today?
                </div>
                <div >
                    <div >
                    5
                    </div>
                    <div >
                    12
                    </div>
                </div>
            </div>
        </div>
        <div >
            <div >
                <div >
                    Q2: How many donuts did you eat today?
                </div>
                <div >
                    <div >
                    0
                    </div>
                    <div >
                    22
                    </div>
                </div>
            </div>
        </div>
        <div >
            <div >
                <div >
                    Q3: How many sugars did you put in your coffee today?
                </div>
                <div >
                    <div >
                    7
                    </div>
                    <div >
                    18
                    </div>
                </div>
            </div>
        </div>
    
  </div>
  <div >
  <br/><br/>LUNCH<br/><br/>
  </div>
    <div  style="background:burlywood;">
        <div >
        </div>
        <div ></div>
        <div >
            <div >
                <div >
                    Q1: How many burgers did you eat today?
                </div>
                <div >
                    <div >
                    1
                    </div>
                    <div >
                    5
                    </div>
                </div>
            </div>
        </div>
        <div >
            <div >
                <div >
                    Q2: How many fries did you eat today?
                </div>
                <div >
                    <div >
                    10
                    </div>
                    <div >
                    45
                    </div>
                </div>
            </div>
        </div>
        <div >
            <div >
                <div >
                    Q3: How many sodas did you drink today?
                </div>
                <div >
                    <div >
                    1
                    </div>
                    <div >
                    1
                    </div>
                </div>
            </div>
        </div>
    </div>  
</body>
</html>

JsFiddle Example1: (as shown above symmetrical example) https://jsfiddle.net/nk5vczt0/1/

JsFiddle Example2: (real life non-symmetrical better example): https://jsfiddle.net/obvzdfeh/

JsFiddle Example3: (smaller non-symmetrical example): https://jsfiddle.net/mp0bqx4n/1/

CodePudding user response：

You can use the fact that the relevant questRow is the 3rd child of each sectionquestgrp.

div.sectionquestgrp div:nth-child(3)>div.questContent>div.questAnswers>div.currentAnswer {
  background: magenta;
  width: fit-content;
}

<!DOCTYPE html>
<html>

<head>
  <style>
    div.sectionquestgrp div:nth-child(3)>div.questContent>div.questAnswers>div.currentAnswer {
      background: magenta;
      width: fit-content;
    }
  </style>
</head>

<body>
  How can I highlight just the class currentAnswer of both groups without javascript?
  <div >
    <br/><br/>BREAKFAST<br/><br/>
  </div>
  <div  style="background:antiquewhite;">
    <div >
    </div>
    <div ></div>
    <div >
      <div >
        <div >
          Q1: How many coffees did you drink today?
        </div>
        <div >
          <div >
            5
          </div>
          <div >
            12
          </div>
        </div>
      </div>
    </div>
    <div >
      <div >
        <div >
          Q2: How many donuts did you eat today?
        </div>
        <div >
          <div >
            0
          </div>
          <div >
            22
          </div>
        </div>
      </div>
    </div>
    <div >
      <div >
        <div >
          Q3: How many sugars did you put in your coffee today?
        </div>
        <div >
          <div >
            7
          </div>
          <div >
            18
          </div>
        </div>
      </div>
    </div>

  </div>
  <div >
    <br/><br/>LUNCH<br/><br/>
  </div>
  <div  style="background:burlywood;">
    <div >
    </div>
    <div ></div>
    <div >
      <div >
        <div >
          Q1: How many burgers did you eat today?
        </div>
        <div >
          <div >
            1
          </div>
          <div >
            5
          </div>
        </div>
      </div>
    </div>
    <div >
      <div >
        <div >
          Q2: How many fries did you eat today?
        </div>
        <div >
          <div >
            10
          </div>
          <div >
            45
          </div>
        </div>
      </div>
    </div>
    <div >
      <div >
        <div >
          Q3: How many sodas did you drink today?
        </div>
        <div >
          <div >
            1
          </div>
          <div >
            1
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

UPDATE: the question has been edited to include some different examples of the layout and the above does not work for these new ones.

However, the selecting of the relevant ancestor element using the CSS :not as given in those examples (to outline the relevant group) does work and all we need to do it say 'select that and then the descendant .curr [or currentAnswer as in the original example code given]

.row:not(.row ~ .row) .curr {
    background-color: yellow;
}

Here is the new Example 1 with that code:

.row:not(.row ~ .row) .curr {
  background-color: yellow;
}

<div >
  <br/><br/>BREAKFAST<br/><br/>
</div>
<div  style="background:antiquewhite;">
  <div >
  </div>
  <div ></div>
  <div ></div>
  <div >
    <div >Q1: How many coffees did you drink today?</div>
    <div >
      <div >5</div>
      <div >12</div>
    </div>
  </div>
  <div >
    <div >Q2: How many donuts did you eat today?</div>
    <div >
      <div >55</div>
      <div >122</div>
    </div>
  </div>
  <div >
    <div >Q3: How many sugars did you put in your coffee today?</div>
    <div >
      <div >555</div>
      <div >1222</div>
    </div>
  </div>
</div>

<div >
  <br/><br/>LUNCH<br/><br/>
</div>
<div  style="background:burlywood;">
  <div >
  </div>

  <div ></div>
  <div >
    <div >Q1: How many burgers did you have today?</div>
    <div >
      <div >1</div>
      <div >12</div>
    </div>
  </div>
  <div >
    <div >Q2: How many fries did you eat today?</div>
    <div >
      <div >4</div>
      <div >122</div>
    </div>
  </div>
  <div >
    <div >Q3: How many sodas did you have today?</div>
    <div >
      <div >8</div>
      <div >1222</div>
    </div>
  </div>
</div>

Note: remember to change the class names to make the first example work - shorter class names were used in Examples 1 and 2 that were added to the question.