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 vote332 views1 answer
How to disable keyboard in windows 10
CSS
0 vote291 views1 answer
Placer balise p a la suite
CSS
0 vote296 views1 answer
Add css to class=["col-"]
CSS
0 vote394 views1 answer
Easyui datagrid header font size
CSS
0 vote328 views1 answer
Css letter spacing tight
CSS
0 vote297 views1 answer
Wordpress template load CSS
CSS
1 vote314 views1 answer
Css how to make something italized
CSS
8 votes316 views1 answer
How to get my div to centre
CSS
1 vote295 views1 answer
Css show scrollbar if overflow
CSS
0 vote290 views1 answer
Remove border radius select css
CSS