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

44 votes294 views6 answers
Gradient color css
CSS
16 votes293 views2 answers
Center h1 css
CSS
0 vote297 views1 answer
Vsc css autocomplet
CSS
24 votes288 views2 answers
Text-overflow: ellipsis; 2 line
CSS
0 vote292 views1 answer
How do I add a vertical margin in css
CSS
18 votes286 views4 answers
Css font arial
CSS
0 vote289 views2 answers
How to change svg image color on hover using css
CSS
4 votes285 views3 answers
Css moz webkit generator
CSS
126 votes296 views7 answers
Css box shadow
CSS
0 vote265 views1 answer
Codebuddysurej
CSS