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

Question

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 class="sectionname">
  <br/><br/>BREAKFAST<br/><br/>
  </div>
    <div class="sectionquestgrp" style="background:antiquewhite;">
        <div class="grouplabel">
        </div>
        <div class="filler"></div>
        <div class="cb"></div>
        <div class="questRow">
            <div class="questContent">
                <div class="questInfo">
                    Q1: How many coffees did you drink today?
                </div>
                <div class="questAnswers">
                    <div class="currentAnswer surveyReportCurrentYearResponse">
                    5
                    </div>
                    <div class="previousAnswer surveyReportPrevYearResponse">
                    12
                    </div>
                </div>
            </div>
        </div>
        <div class="questRow">
            <div class="questContent">
                <div class="questInfo">
                    Q2: How many donuts did you eat today?
                </div>
                <div class="questAnswers">
                    <div class="currentAnswer surveyReportCurrentYearResponse">
                    0
                    </div>
                    <div class="previousAnswer surveyReportPrevYearResponse">
                    22
                    </div>
                </div>
            </div>
        </div>
        <div class="questRow">
            <div class="questContent">
                <div class="questInfo">
                    Q3: How many sugars did you put in your coffee today?
                </div>
                <div class="questAnswers">
                    <div class="currentAnswer surveyReportCurrentYearResponse">
                    7
                    </div>
                    <div class="previousAnswer surveyReportPrevYearResponse">
                    18
                    </div>
                </div>
            </div>
        </div>
    
  </div>
  <div class="sectionname">
  <br/><br/>LUNCH<br/><br/>
  </div>
    <div class="sectionquestgrp" style="background:burlywood;">
        <div class="grouplabel">
        </div>
        <div class="missingfiller"></div>
        <div class="questRow">
            <div class="questContent">
                <div class="questInfo">
                    Q1: How many burgers did you eat today?
                </div>
                <div class="questAnswers">
                    <div class="currentAnswer surveyReportCurrentYearResponse">
                    1
                    </div>
                    <div class="previousAnswer surveyReportPrevYearResponse">
                    5
                    </div>
                </div>
            </div>
        </div>
        <div class="questRow">
            <div class="questContent">
                <div class="questInfo">
                    Q2: How many fries did you eat today?
                </div>
                <div class="questAnswers">
                    <div class="currentAnswer surveyReportCurrentYearResponse">
                    10
                    </div>
                    <div class="previousAnswer surveyReportPrevYearResponse">
                    45
                    </div>
                </div>
            </div>
        </div>
        <div class="questRow">
            <div class="questContent">
                <div class="questInfo">
                    Q3: How many sodas did you drink today?
                </div>
                <div class="questAnswers">
                    <div class="currentAnswer surveyReportCurrentYearResponse">
                    1
                    </div>
                    <div class="previousAnswer surveyReportPrevYearResponse">
                    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/

A Haworth · Accepted Answer · 2023-02-04T07:33:52.220

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 class="sectionname">
    <br/><br/>BREAKFAST<br/><br/>
  </div>
  <div class="sectionquestgrp" style="background:antiquewhite;">
    <div class="grouplabel">
    </div>
    <div class="cb"></div>
    <div class="questRow">
      <div class="questContent">
        <div class="questInfo">
          Q1: How many coffees did you drink today?
        </div>
        <div class="questAnswers">
          <div class="currentAnswer surveyReportCurrentYearResponse">
            5
          </div>
          <div class="previousAnswer surveyReportPrevYearResponse">
            12
          </div>
        </div>
      </div>
    </div>
    <div class="questRow">
      <div class="questContent">
        <div class="questInfo">
          Q2: How many donuts did you eat today?
        </div>
        <div class="questAnswers">
          <div class="currentAnswer surveyReportCurrentYearResponse">
            0
          </div>
          <div class="previousAnswer surveyReportPrevYearResponse">
            22
          </div>
        </div>
      </div>
    </div>
    <div class="questRow">
      <div class="questContent">
        <div class="questInfo">
          Q3: How many sugars did you put in your coffee today?
        </div>
        <div class="questAnswers">
          <div class="currentAnswer surveyReportCurrentYearResponse">
            7
          </div>
          <div class="previousAnswer surveyReportPrevYearResponse">
            18
          </div>
        </div>
      </div>
    </div>

  </div>
  <div class="sectionname">
    <br/><br/>LUNCH<br/><br/>
  </div>
  <div class="sectionquestgrp" style="background:burlywood;">
    <div class="grouplabel">
    </div>
    <div class="cb"></div>
    <div class="questRow">
      <div class="questContent">
        <div class="questInfo">
          Q1: How many burgers did you eat today?
        </div>
        <div class="questAnswers">
          <div class="currentAnswer surveyReportCurrentYearResponse">
            1
          </div>
          <div class="previousAnswer surveyReportPrevYearResponse">
            5
          </div>
        </div>
      </div>
    </div>
    <div class="questRow">
      <div class="questContent">
        <div class="questInfo">
          Q2: How many fries did you eat today?
        </div>
        <div class="questAnswers">
          <div class="currentAnswer surveyReportCurrentYearResponse">
            10
          </div>
          <div class="previousAnswer surveyReportPrevYearResponse">
            45
          </div>
        </div>
      </div>
    </div>
    <div class="questRow">
      <div class="questContent">
        <div class="questInfo">
          Q3: How many sodas did you drink today?
        </div>
        <div class="questAnswers">
          <div class="currentAnswer surveyReportCurrentYearResponse">
            1
          </div>
          <div class="previousAnswer surveyReportPrevYearResponse">
            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 class="sectionname">
  <br/><br/>BREAKFAST<br/><br/>
</div>
<div class="group" style="background:antiquewhite;">
  <div class="grouplabel">
  </div>
  <div class="filler"></div>
  <div class="cb"></div>
  <div class="row">
    <div class="question">Q1: How many coffees did you drink today?</div>
    <div class="answers">
      <div class="curr">5</div>
      <div class="prev">12</div>
    </div>
  </div>
  <div class="row">
    <div class="question">Q2: How many donuts did you eat today?</div>
    <div class="answers">
      <div class="curr">55</div>
      <div class="prev">122</div>
    </div>
  </div>
  <div class="row">
    <div class="question">Q3: How many sugars did you put in your coffee today?</div>
    <div class="answers">
      <div class="curr">555</div>
      <div class="prev">1222</div>
    </div>
  </div>
</div>

<div class="sectionname">
  <br/><br/>LUNCH<br/><br/>
</div>
<div class="group" style="background:burlywood;">
  <div class="grouplabel">
  </div>

  <div class="cb"></div>
  <div class="row">
    <div class="question">Q1: How many burgers did you have today?</div>
    <div class="answers">
      <div class="curr">1</div>
      <div class="prev">12</div>
    </div>
  </div>
  <div class="row">
    <div class="question">Q2: How many fries did you eat today?</div>
    <div class="answers">
      <div class="curr">4</div>
      <div class="prev">122</div>
    </div>
  </div>
  <div class="row">
    <div class="question">Q3: How many sodas did you have today?</div>
    <div class="answers">
      <div class="curr">8</div>
      <div class="prev">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.

@A Haworth Nice use of selectors but I had to add an extra example of my real life scenario (Example2) which isn't so symmetrical. It's not always the 3rd element. It is a little trickier than your solution. — PPL, Feb 03 '23 at 22:56

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

1 Answers1