Struggling to apply different styles to the same class when it appears for the second time in the markup using the Subsequent-sibling combinator "~". It seems like there may be a detail I'm missing with the use of "~". Unfortunately, the HTML cannot be changed as it is generated by a CMS.
<div class="root">
<div class="container">
<div class="mosaic big">
<div>Red</div>
</div>
</div>
<div class="container">
<div class="mosaic medium">
<div>3</div>
</div>
</div>
<div class="container">
<div class="mosaic big">
<div>Blue</div>
</div>
</div>
<div class="container">
<div class="mosaic medium">
<div>4</div>
</div>
</div>
</div>
This is the CSS code:
.root > .container > .mosaic.big {
color: red;
}.root > .container > .mosaic.big ~ .root > .container > .mosaic.big {
color: blue;
}
Check out the jsfiddle here. Thank you in advance.