JSFiddle - React, Tailwind, and code Playground
HTML
<!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...
CSS
.questRow:not(.questRow ~ .questRow){
border: solid red 5px;
}
.currentAnswer.surveyReportCurrentYearResponse {
background-color:yellow;
}
.currentAnswer.surveyReportCurrentYearResponse ~ .currentAnswer.surveyReportCurrentYearResponse {
background-color: none;
}