Search code examples
javascriptcssvue.jssassless

I have this table where I have several column. Last two of them are sticky ("is-sticky" class). I want to apply some styles to the first sticky column

<td> ...</td>
...
...
...
<td class="is-sticky">...</td> <-- want to apply style here
<td class="is-sticky">...</td> <-- no styles here

In the above code. Probably there are multiple sticky columns after the first one. But the style i want to add is only for the first column.

Solution

  • Pure CSS : Select every element of the class that is the sibling of the same class > invert it and select the class again.

    :not(.is-sticky ~ .is-sticky).is-sticky {
  color: red;
}
    <table>
  <tr>
    <td> .asdasd..</td>
    <td class="is-sticky">.. Frist .</td>
    <td class="is-sticky">... Second</td>
    <td class="is-sticky">... Third</td>
  </tr>
</table>