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 vote151 views1 answer
Overwrite safari dropdown css
CSS
0 vote127 views1 answer
Autocomplete widget not working in modal popup
CSS
0 vote137 views1 answer
Css convert td to tr
CSS
0 vote89 views1 answer
Go to top page css
CSS
0 vote135 views1 answer
Html5 video hide timeline bar
CSS
0 vote148 views2 answers
Blockquote quotation marks css
CSS
0 vote147 views1 answer
Efectos imagenes css
CSS
0 vote145 views1 answer
Css color codes
CSS
150 votes191 views2 answers
How to link your css file to html
CSS
21 votes124 views2 answers
Form field focus border remove css
CSS