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 votes233 views1 answer
Remove accordion space materuail ui css
CSS
7 votes223 views2 answers
Max z-index value css
CSS
6 votes238 views5 answers
Bootstrap icons
CSS Bootstrap
0 vote232 views1 answer
Override package css
CSS
6 votes232 views9 answers
Create a portfolio website with html css
CSS
-2 votes237 views1 answer
Css opacity transition
CSS
0 vote226 views1 answer
How to link to class in CSS
CSS
0 vote255 views1 answer
Profile page html css template
CSS
0 vote286 views1 answer
Alacritty auto start fish
CSS
1 vote232 views1 answer
Overflow: scroll displaces the inline element
CSS