<ol class="test1">
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
</ol>
<ol class="test2">
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
</ol>
<ol class="test3">
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
<li>Testing</li>
</ol>
<table class="data-table">
<tr>
<td>testing</td>
</tr>
<tr>
<td>testing</td>
</tr>
<tr>
<td>testing</td>
</tr>
<tr>
<td>testing</td>
</tr>
<tr>
<td>testing</td>
</tr>
<tr>
<td>testing</td>
</tr>
</table>
ol {
display: inline-flex;
flex-direction: column;
margin: 1rem 2rem 1rem 1rem;
}
.test1 li:nth-child(3) {
background: red;
}
.test2 li:nth-child(4) {
background: blue;
}
.test3 li:nth-child(5) {
background: green;
}
.data-table {
width: 50%;
margin: 2rem;
}
.data-table tr {
background: red;
}
.data-table tr:nth-child(even) {
background: green;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.