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 vote326 views2 answers
Html select image background arrow
CSS
1 vote183 views1 answer
How to use input border
CSS
0 vote164 views1 answer
Css opacity from 0 to 1
CSS
3 votes160 views2 answers
Bootstrap.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
CSS
185 votes478 views6 answers
Attach css file to html
CSS
1 vote177 views1 answer
Css system default font
CSS
0 vote164 views1 answer
Stop mysqld.exe cmd
CSS
0 vote170 views1 answer
Tailwindcss tutorial
CSS
0 vote166 views1 answer
Jquery change css variiable value
CSS
0 vote190 views1 answer
Removing default background color of html input
CSS