I've created this HTML structure:
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
And I have applied the following CSS styling:
.item {
float: left;
width: 10%;
background-color: red;
}
The items labeled from 1 to 10 in each row occupy the full width of the screen and are displayed with a red background.
I have divided these items into 3 separate 'rows'.
To change the background color of the last item in each row to yellow, I used the following CSS code:
.item:nth-of-type(10n) {
background-color: yellow;
}
However, when attempting to do the same for the first item in each row, the styling does not apply:
.item:nth-of-type(1n) {
background-color: yellow;
}
Is there a way to give the first item in every row a different background color without modifying the HTML elements?