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 vote158 views1 answer
Dropcap - :first-letter pseudo class not working as expected in firefox
CSS
10 votes151 views2 answers
Make image darker in css
CSS
0 vote142 views1 answer
Script for free code camp test
CSS
27 votes147 views1 answer
Css how to create gradients on text outline
CSS
48 votes160 views3 answers
Red color rgb
CSS
0 vote139 views1 answer
Css animation delay does not work
CSS
23 votes157 views1 answer
What is shadow house about
CSS
0 vote159 views1 answer
Css change browser color
CSS
0 vote135 views1 answer
Pass argument to group_by
CSS
1 vote148 views1 answer
Input time without am pm
CSS