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 vote116 views1 answer
Ellipsis css in table cell 2 lines
CSS
0 vote116 views2 answers
Unable to load authentication plugin 'caching_sha2_password'
CSS
0 vote83 views1 answer
Css disable transition on first load
CSS
35 votes128 views6 answers
Ellipsis
CSS
38 votes120 views3 answers
Css breakpoints
CSS
28 votes151 views6 answers
Linear gradient css background image
CSS
127 votes120 views4 answers
React import bootstrap css
CSS
0 vote177 views1 answer
Line not breaking css
CSS
0 vote113 views1 answer
Css clamp vs media queries
CSS
2 votes114 views1 answer
Uninstall pm2
CSS