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

Preetham Sridhar 0
Viewed 25
<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.

less sass vue.js javascript css
5 Answers

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>

user4wib0

You can add multiple classes to an element like this

<td class="is-sticky yourCSSClass">
Darren Landig0

You can use :first-child selector to style the first is-sticky of a parent differently to the ones that follow.

.is-sticky:first-child {
  background-color: red;
}
<div class='is-sticky'>text</div>
<div class='is-sticky'>text</div>
<div class='is-sticky'>text</div>
<div class='is-sticky'>text</div>

userokf20 

var get_all_elements = document.querySelectorAll('.is-sticky')[0];
get_all_elements.style.border = '1px solid red';
<table id="customers">
  <tr>
    <td>Customer 1</td>
    <td class="is-sticky">Customer 2</td>
    <td class="is-sticky">Customer 3</td>
  </tr>
</table>

Cervus camelopardalis0

add another class to the first one "class ="is-sticky first-column"

Then in css u can easily call to only the first column.

.first-column .is-sticky {
    color: white;
    etc;
}
CodeMaybe0
Related