How to select the first two children elements before descendant elements in CSS?-CodePudding

I hope you are doing well. I have the following code:

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

My question is how can I select the divs marked with the data-target attribute in CSS. Furthermore I am not allowed to use the following selectors: :nth-child :nth-last-child :nth-of-type :nth-last-of-type any use of or ~ data-target

Thank you.

CodePudding user response：

Using:

document.querySelectorAll('article > section > div');

Selects all <div> elements where the parent is a <section> element whose parent is a <article> element.

https://jsfiddle.net/shwr20go/1/

CodePudding user response：

div[data-target] { //code here }