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 vote352 views1 answer
Text slide animation css
CSS
1 vote315 views1 answer
When is raksha bandhan in india 2020
CSS
0 vote328 views3 answers
Html input file upload image for profile picture
CSS
1 vote329 views2 answers
Input autocomplete css color
CSS
-1 vote350 views2 answers
How to style a particular image in css
CSS
86 votes349 views3 answers
Css tekst bold
CSS
1 vote402 views1 answer
This selector doesn't have any properties and won't be rendered. sass
CSS
0 vote343 views1 answer
Override package css
CSS
0 vote357 views1 answer
Navbar css code
CSS
0 vote359 views1 answer
Vuetify width of textfield
CSS