CSS: Show the last 3 elements before a specific class

Question

So I have no idea whether CSS has any calculations that will give me my desired result but I want to show the last three elements before a specific class, in my code below I have been playing with nth-child but I can only get this to remove elements before, in my current example I can show the last three records before the "CurrentYear" class but I have to remove the first nine, my issue is this number is always changing, there might only be 6 records so I only want to hide 3 of the 6.

FIDDLE

.eaKeyDate { width:30px; height:20px; line-height:20px; text-align:center; border:solid 1px #ccc; display:none }

.eaKeyDate:nth-child(n+9) { background-color:green; color:white; display:block; }

.eaKeyDate.CurrentYear { background-color:red !important; color:white !important; display:block !important; }

<div class="eaKeyDate">1</div>
<div class="eaKeyDate">2</div>
<div class="eaKeyDate">3</div>
<div class="eaKeyDate">4</div>
<div class="eaKeyDate">5</div>
<div class="eaKeyDate">6</div>
<div class="eaKeyDate">7</div>
<div class="eaKeyDate">8</div>
<div class="eaKeyDate">9</div>
<div class="eaKeyDate">10</div>
<div class="eaKeyDate">11</div>
<div class="eaKeyDate CurrentYear">12</div>
<div class="eaKeyDate CurrentYear">1</div>
<div class="eaKeyDate CurrentYear">2</div>
<div class="eaKeyDate CurrentYear">3</div>
<div class="eaKeyDate CurrentYear">4</div>
<div class="eaKeyDate CurrentYear">5</div>
<div class="eaKeyDate CurrentYear">6</div>
<div class="eaKeyDate CurrentYear">7</div>
<div class="eaKeyDate CurrentYear">8</div>
<div class="eaKeyDate CurrentYear">9</div>
<div class="eaKeyDate CurrentYear">10</div>
<div class="eaKeyDate CurrentYear">11</div>

Is there anyway in CSS I can just say "show the last three records before the first instance of CurrentYear".

P.S. I am only trying to resolve this in CSS, I know its easy done in JS but currently that's not an option.

Thanks

CSS: Show the last 3 elements before a specific class

0 Answers0