Styling elements based on sibling count

with table cells

by David_Knowles

HTML

<table class="table-condensed">
  <thead>
    <tr>
      <th colspan="7" class="datepicker-title" style="display: none;"></th>
    </tr>

    <tr>
      <th class="prev" style="visibility: visible;">&laquo;</th>

      <th colspan="5" class="datepicker-switch">maart 2016</th>

      <th class="next" style="visibility: visible;">&raquo;</th>
    </tr>

    <tr>
      <th class="dow">ma</th>

      <th class="dow">di</th>

      <th class="dow">wo</th>

      <th class="dow">do</th>

      <th class="dow">vr</th>

      <th class="dow disabled">za</th>

      <th class="dow">zo</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td class="old day">29</td>

      <td class="day">1</td>

      <td class="day">2</td>

      <td class="day">3</td>

      <td class="day">4</td>

      <td class="disabled day">5</td>

      <td class="disabled day">6</td>
    </tr>

    <tr>
      <td class="day">7</td>

      <td class="day">8</td>

      <td class="day">9</td>

      <td class="day">10</td>

      <td class="day">11</td>

      <td class="disabled day">12</td>

      <td class="disabled day">13</td>
    </tr>

    <tr>
      <td class="day">14</td>

      <td class="day">15</td>

      <td class="day">16</td>

      <td class="day">17</td>

      <td class="day">18</td>

      <td class="disabled day">19</td>

      <td class="disabled day">20</td>
    </tr>

    <tr>
      <td class="day">21</td>

      <td class="day">22</td>

      <td class="day">23</td>

      <td class="day">24</td>

      <td class="day">25</td>

      <td class="disabled day">26</td>

      <td class="disabled day">27</td>
    </tr>

    <tr>
      <td class="day">28</td>

      <td class="day">29</td>

      <td class="day">30</td>

      <td class="day">31</td>

      <td class="new day">1</td>

      <td class="new disabled day">2</td>

      <td class="new disabled day">3</td>
    </tr>

    <tr>
      <td class="new day">4</td>

      <td class="new day">5</td>

      <td class="new...

CSS

td {
  border: 1px solid gray;
}

td:first-child:nth-last-child(7),
td:first-child:nth-last-child(7) ~ td {
	background-color: red;
}