As I gear up for a regional championship in web development for high school students, one of the preparation tasks involves solving challenges on the championship website. The HTML code provided is as follows:
<h2>Task 6</h2>
<article id="task-6">
<div class="marble" data-target></div>
<section class="first">
<div class="marble" data-target></div>
<div class="marble"></div>
<div class="marble" data-target></div>
</section>
<div class="marble"></div>
<section class="last">
<div class="marble" data-target></div>
<div class="marble"></div>
<div class="marble" data-target></div>
</section>
<div class="marble" data-target></div>
</article>
For this task, my objective is to select the div elements with the marble class marked with data-target, while adhering to certain conditions:
I must refrain from using CSS pseudo-classes or selectors including:
:nth-child:nth-last-child:nth-of-type:nth-last-of-type[data-target]- as well as avoiding any use of
+or~
Only a single selector is permitted.
Despite attempting the selector shown, it only manages to select the divs within the section elements.
#task-6 section div:not(:not(:first-child):not(:last-child))
If anyone can offer assistance, I would greatly appreciate it. Thank you.