Which html elements can I use with css's nth child() property?

user_18987112 0
Viewed 36

I wrote this html code:

<div>
    <details>
        <summary><span class="para">This is paragraph one</span></summary>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa doloribus soluta aliquid cum dolores molestias suscipit similique, laborum consequatur aut accusamus ad unde! Aliquid vitae, rem hic provident architecto nihil?</p>
    </details>
</div>

<div>
    <details>
        <summary><span class="para">This is paragraph two</span></summary>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum impedit voluptatem ea provident quidem ex vitae debitis molestiae ducimus. Corrupti cumque dolorem, sit eum quo voluptas minima consequatur hic exercitationem?</p>
    </details>
</div>

<div>
    <details>
        <summary><span class="para">This is paragraph three</span></summary>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta assumenda illum dolorem error doloremque qui. A nihil quo quidem ipsa, alias eum nostrum dignissimos laborum! In libero autem molestias nobis!</p>
    </details>
</div>

<div>
    <details>
        <summary><span class="para">This is paragraph four</span></summary>

        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta assumenda illum dolorem error doloremque qui. A nihil quo quidem ipsa, alias eum nostrum dignissimos laborum! In libero autem molestias nobis!</p>
    </details>
</div>

And then I used this CSS code:

span.para:nth-child(2n) {
    background-color: antiquewhite;
}

But no changes happened on my result. Please Someone explain me why this is happening and help me to find error

css html
1 Answers

All your span.para elements are the first children (of summary elements).

It is actually the div ancestor of those elements that are the odd or even children - of 'something'.

The something might be right back to the body, or they might be in a container of their own.

For safety I've put them in a surrounding container so you are sure you are getting the right ones. But it depends on your actual use case whether something is needed here or not.

.thecontainer div:nth-child(2n)>details>summary>span {
  background-color: antiquewhite;
}
<div class="thecontainer">
  <div>
    <details>
      <summary><span class="para">This is paragraph one</span></summary>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa doloribus soluta aliquid cum dolores molestias suscipit similique, laborum consequatur aut accusamus ad unde! Aliquid vitae, rem hic provident architecto nihil?</p>
    </details>
  </div>

  <div>
    <details>
      <summary><span class="para">This is paragraph two</span></summary>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum impedit voluptatem ea provident quidem ex vitae debitis molestiae ducimus. Corrupti cumque dolorem, sit eum quo voluptas minima consequatur hic exercitationem?</p>
    </details>
  </div>

  <div>
    <details>
      <summary><span class="para">This is paragraph three</span></summary>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta assumenda illum dolorem error doloremque qui. A nihil quo quidem ipsa, alias eum nostrum dignissimos laborum! In libero autem molestias nobis!</p>
    </details>
  </div>

  <div>
    <details>
      <summary><span class="para">This is paragraph four</span></summary>

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta assumenda illum dolorem error doloremque qui. A nihil quo quidem ipsa, alias eum nostrum dignissimos laborum! In libero autem molestias nobis!</p>
    </details>
  </div>
</div>

user_108674540
Related