Pseudo class css nth child

<!DOCTYPE html>
<html>
<head>
<style> 
/* Selects the second element of div siblings */
.out > :nth-child(1) .myclass {
  background: red;
}
.out > :nth-child(2) .myclass {
  background: green;
}
.out > :nth-child(3) .myclass {
  background: yellow;
}

</style>
</head>
<body>

<div class="out">

  <div>
    <div>
      <div class="myclass">
        <p>This is some text.</p>
      </div>
      SOME
    </div>
    SOME 2
  </div>

  <div>
    <div>
      <div class="myclass">
        <p>This is some text.</p>
      </div>
      SOME
    </div>
    SOME 2
  </div>

  <div>
    <div>
      <div class="myclass">
        <p>This is some text.</p>
      </div>
      SOME
    </div>
    SOME 2
  </div>
  
</div>

</body>
</html>

Source: codegrepper.com

Similar codes

0 vote195 views1 answer
Css in head or body
CSS
5 votes303 views4 answers
Css inset
CSS
3 votes179 views2 answers
How to make hover effect none in css
CSS
60 votes208 views4 answers
Hide scroll bar for a dive
CSS
0 vote187 views1 answer
Css transparent background behind text
CSS
20 votes164 views4 answers
Css display vertical align
CSS
2 votes181 views2 answers
Remove border iframe
CSS
1 vote313 views1 answer
How to take in space and enter as it is in a textarea
CSS
0 vote198 views1 answer
Ion-img border radius
CSS
0 vote177 views1 answer
P::after p::before css
CSS