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

6 votes137 views4 answers
How to make the image in the center html
CSS
0 vote178 views1 answer
Bootstrap-navbar-containers
CSS Bootstrap
1 vote157 views1 answer
How to boosts your rendering performance
CSS
0 vote141 views1 answer
RROR: PKGBUILD contains CRLF characters and cannot be sourced.
CSS
0 vote141 views1 answer
Wrap text around circle image css
CSS
0 vote142 views1 answer
CS REMOVING BACKGROUND IMAGE
CSS
1 vote185 views1 answer
How to remove image using css
CSS
0 vote233 views3 answers
Bulma capitalized
CSS Bulma
7 votes165 views2 answers
Background color semi transparent
CSS
0 vote151 views1 answer
Credimax
CSS