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

1 vote287 views1 answer
How to verticaly align items in a HTML container
CSS
0 vote286 views2 answers
Print to pdf setting css for A4 size
CSS
0 vote262 views1 answer
Mathjax beautiful math in all browsers
CSS
0 vote270 views1 answer
Alpine extract data to script tag
CSS
2 votes277 views1 answer
New line in url
CSS
8 votes310 views2 answers
Css resize checkbox
CSS
2 votes293 views1 answer
How to prevent anchor links from scrolling behind a sticky header with one line of CSS
CSS
0 vote294 views2 answers
Modal pop up html css
CSS
13 votes285 views4 answers
Responsive css grid
CSS
1 vote330 views1 answer
Bootstrap card hover effect
CSS Bootstrap