I have various divs within a container with the same class (class="myDiv"). The positioning of these divs inside the container can vary...
The goal is to style all divs with the class .myDiv as follows:
- the first div should have color "red"
- the second div should be styled in green
- and so on...
My current strategy is demonstrated through this jsFiddle (snippet provided below)
.myDiv:nth-child(1){color:red;}
.myDiv:nth-child(2){color:green;}
.myDiv:nth-child(3){color:aqua;}
.myDiv:nth-child(4){color:orange;}
.myDiv:nth-child(5){color:pink;}<div class="container">
<table>
<tr>
<td><div class="myDiv">One</div></td>
<td>Normal text</td>
<td>Normal text</td>
<td>Normal text</td>
<td>
<table>
<tr>
<td><div class="myDiv">Two</div></td>
</tr>
</table>
</td>
<td><div class="myDiv">Three</div></td>
<td><div class="myDiv">Four</div></td>
</tr>
</table>
<div class="myDiv">Five</div>
</div>Expected outcome:
https://i.sstatic.net/NW4EE.jpg
Actual outcome: