I have this table where I have several column. Last two of them are sticky ("is-sticky" cl-CodePudding

<td> ...</td>
...
...
...
<td >...</td> <-- want to apply style here
<td >...</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.

CodePudding user response：

You can add multiple classes to an element like this

<td >

CodePudding user response：

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>

CodePudding user response：

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 >Customer 2</td>
    <td >Customer 3</td>
  </tr>
</table>

CodePudding user response：

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 >.. Frist .</td>
    <td >... Second</td>
    <td >... Third</td>
  </tr>
</table>

CodePudding user response：

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;
}