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 votes354 views2 answers
Css properties
CSS
0 vote325 views2 answers
How to remove default look of button
CSS
1 vote345 views1 answer
Css display div horizontally
CSS
0 vote350 views3 answers
Split large files
CSS
59 votes344 views6 answers
Remove underline from link css
CSS
4 votes439 views1 answer
Animation-direction property
CSS
34 votes406 views1 answer
Css middle and center align div
CSS
12 votes372 views3 answers
Vertical and horizontal align center div
CSS
0 vote391 views1 answer
The basic - and minimal - structure of an email template looks like this:
CSS
5 votes331 views1 answer
Less sass css
CSS