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 vote343 views1 answer
Bring element to front css
CSS
0 vote378 views2 answers
Https://www.youtube.com/s/desktop/f357c206/cssbin/www-main-desktop-watch-page-skeleton.css
CSS
1 vote304 views1 answer
Css reset margin padding
CSS
3 votes309 views2 answers
Scrollbar change css
CSS
0 vote321 views1 answer
Align icon center div
CSS
12 votes317 views5 answers
Responsive font-size
CSS
0 vote319 views1 answer
CSS fluid type sizing based on viewport
CSS
0 vote330 views1 answer
Circular div css
CSS
1 vote326 views1 answer
Add css variables without global
CSS
7 votes320 views1 answer
Show hand icon on hover javascript
CSS