How to select first two children of an element without :nth pseudo-classes?

Noah Zemljic 0
Viewed 30

I am currently preparing myself for a regional championship in web development for high-school students. Preparation tasks are one the championships website to solve. I have the following HTML code:

<h2>Task 5</h2>
<article id="task-5">
    <div class="marble"></div>
    <div class="marble"></div>
    <section>
        <div class="marble" data-target></div>
        <div class="marble" data-target></div>
        <section>
            <div class="marble"></div>
            <div class="marble"></div>
        </section>
    </section>
</article>

My goal is to select the divs with the marble class marked with data-target, but under following requirements:

  • I am not allowed to use these CSS pseudo-classes or CSS selectors:
    • :nth-child
    • :nth-last-child
    • :nth-of-type
    • :nth-last-of-type
    • [data-target]
    • nor any use of + or ~
  • Only one selector is allowed.

I have tried the following selector, but it still selects the third div (the one not marked with data-target):

#task-5 section > div:not(:last-child):not(:is(:first-child:is(:last-child)))

Can you please help me. Thank you very much

css-selectors css html
3 Answers

First you can select the section that has another section as a descendant. Then you can select the divs that are not descendants of a section which is the descendant of a section.

section:has(section) div:not(section section div) {
  width: 100px;
  height: 100px;
  background: red;
}
<h2>Task 5</h2>
<article id="task-5">
  <div class="marble">1</div>
  <div class="marble">2</div>
  <section>
    <div class="marble" data-target>3</div>
    <div class="marble" data-target>4</div>
    <section>
      <div class="marble">5</div>
      <div class="marble">6</div>
    </section>
  </section>
</article>

Note: currently :has is supported on Firefox only if a flag is set.

A Haworth0

The simplest answer, so far as I can tell from your posted constraints, would be:

/* this uses the child combinator (`>`) to select
   the <div> elements which are the children of
   a <section> which is in turn a child of an
   <article>: */
article > section > div {
  background-color: lime;
}


*,
 ::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section {
  margin-inline-start: 10%;
  padding: 0.5em;
}

div {
  border: 1px solid #000;
  margin-inline-start: 10%;
  min-block-size: 2em;
}

article>section>div {
  background-color: lime;
}
<h2>Task 5</h2>
<article id="task-5">
  <div class="marble"></div>
  <div class="marble"></div>
  <section>
    <div class="marble" data-target></div>
    <div class="marble" data-target></div>
    <section>
      <div class="marble"></div>
      <div class="marble"></div>
    </section>
  </section>
</article>

References:

David Thomas0

You can select the first child through:

element:first-child

and you can select last child:

element :last-child

and you have some method like:

  • not()
  • first-of-type
  • last-of-type
haider fadel0
Related