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

61 votes252 views6 answers
Center text in css
CSS
0 vote236 views2 answers
Ssh: connect to host 165.22.132.219 port 22: Connection refused
CSS
21 votes234 views3 answers
How to create a circle with css
CSS
1 vote232 views1 answer
How to change button gradient
CSS
1 vote258 views1 answer
Html list over three columns
CSS
1 vote219 views1 answer
Tr lowercase uppercase
CSS
9 votes239 views1 answer
Perfect full page background image
CSS
0 vote270 views1 answer
Prevenrt div with height 100% from growing up
CSS
1 vote243 views1 answer
Css keep background image from scrolling
CSS
1 vote243 views1 answer
Ion-item no padding ionic 4
CSS