First even grandchildren (even children of a first child)

smus · January 30, 2021

<ul class="cards">
      <li class="two heart"></li>
      <li class="five diamond"></li>
      <li class="ten heart"></li>
      <li class="jack club"></li>
      <li class="queen spade"></li>
      <li class="king diamond"></li>
      <li class="ace heart"></li>
      <li class="six heart"></li>
      <li class="seven diamond"></li>
      <li class="eight spade"></li>
      <li class="nine club"></li>
      <li class="three club"></li>
      <li class="four heart"></li>
    </ul>
    <ul class="cards">
      <li class="five spade"></li>
      <li class="six diamond"></li>
      <li class="seven spade"></li>
      <li class="eight club"></li>
      <li class="two diamond"></li>
      <li class="three heart"></li>
      <li class="four club"></li>
      <li class="queen club"></li>
      <li class="king spade"></li>
      <li class="seven diamond"></li>
      <li class="nine heart"></li>
      <li class="ten diamond"></li>
      <li class="jack heart"></li>
    </ul>
    <ul class="cards">
      <li class="two spade"></li>
      <li class="ten heart"></li>
      <li class="ace club"></li>
      <li class="five heart"></li>
      <li class="nine diamond"></li>
      <li class="king diamond"></li>
      <li class="ace spade"></li>
      <li class="six heart"></li>
      <li class="eight diamond"></li>
      <li class="ace spade"></li>
      <li class="queen heart"></li>
      <li class="three diamond"></li>
      <li class="four spade"></li>
    </ul>
    <ul class="cards">
      <li class="king heart"></li>
      <li class="jack club"></li>
      <li class="two club"></li>
      <li class="three spade"></li>
      <li class="four diamond"></li>
      <li class="ten club"></li>
      <li class="jack spade"></li>
      <li class="eight diamond"></li>
      <li class="nine spade"></li>
      <li class="queen diamond"></li>
      <li class="five club"></li>
      <li class="six club"></li>
      <li class="seven heart"></li>
    </ul>

How can we call to all even <li> inside the first <ul>?

I tried something like:

li:nth-child(even) ul.cards:first-child{
  background-color: #996666;
}

smus · January 30, 2021

Got it:

ul:nth-child(2) li:nth-child(even){
  background-color: #996666;
}

2 is because there is another <div></div> tag before all the <ul>s. So, in this case, first <ul> is the second child of the <body>

Sign In

First even grandchildren (even children of a first child)

Recommended Posts

smus

Link to comment

Share on other sites

smus

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity