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

2 votes108 views3 answers
Cant read pdf file in python
CSS
29 votes109 views6 answers
Css animation
CSS
0 vote140 views2 answers
What is the request payload in jaavascript fetch
CSS
0 vote101 views2 answers
Background blend mode
CSS
40 votes97 views8 answers
Font size css
CSS
37 votes106 views4 answers
Select even child css
CSS
0 vote100 views1 answer
Padding bottom and top css in same ligne
CSS
0 vote103 views1 answer
Make footer stick to bottom without overlap over other elements
CSS
0 vote114 views1 answer
Whitesmoke color gradient
CSS
0 vote99 views1 answer
Text zentrieren
CSS