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 vote170 views1 answer
Css change width animation
CSS
0 vote188 views1 answer
Javavscript use .filter to return odd numbers in an array
CSS
0 vote188 views1 answer
Music-metadata-browser Buffer is not defined
CSS
0 vote202 views5 answers
SVG color
CSS
0 vote172 views1 answer
Css prevent background scrolling
CSS
0 vote189 views1 answer
Add backdrop to modal css
CSS
0 vote171 views1 answer
Christmas red color code
CSS
16 votes177 views2 answers
How to set background image 100 height
CSS
15 votes170 views3 answers
Css size
CSS
5 votes176 views2 answers
Make background overlay css
CSS