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 vote227 views1 answer
Selectors combinators css
CSS
4 votes212 views2 answers
Transition various properties css
CSS
38 votes185 views6 answers
Gradient text color css
CSS
0 vote209 views2 answers
Html5 vs css3
CSS
2 votes262 views1 answer
Https request
CSS
1 vote207 views2 answers
Styles only for IE
CSS
0 vote207 views1 answer
AITpro maintenance mode CSS
CSS
2 votes201 views1 answer
Div not larger than its content
CSS
1 vote211 views2 answers
Show hidden message html
CSS
5 votes241 views3 answers
Bootstrap 4 classes list with description pdf
CSS Bootstrap