Apply CSS to a previous cell/nth cell by\via applying CSS on the current cell (HTML and CSS)

user_16420755 0
Viewed 28
  1. I want to apply a style using Class (preferably but not mandatory) on a prev. cell from the current cell.
  2. Based on below example, I want to hide the checkbox1 (in first column) if the Type equals TypeName-1
  3. Coding Restrictions,

    3.1) I can only apply CSS on any column except the first one (checkbox)column.

So based on the above restriction I need a way to apply CSS on NAME column AND it should reflect on the hide the checkbox in the previous cell or first cell!

Check All Name Type
checkbox 1 Name 1 TypeName-1
checkbox 2 Name 2 TypeName-2

I tried,
[1] tbody>tr>:nth-child(cellnumber) but it does not work since the none of the elements (tbody, tr) are found in the td cell, where the css is getting applied.

[2] Just using :nth-child(1) applies to current cell, and using -ve number won't apply to previous cell.

styling class css html
1 Answers

Sadly there are currently no previous selector in css but there is a next select so a fancy hack would be to change to html and dir like this:

<table class="s-table" dir="rtl">
    <thead>
        <tr>
            <th>Type</th>
            <th>Name</th>
            <th>Check All</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="type-1">TypeName-1</td>
            <td>Name 1</td>
            <td class="checkbox">checkbox 1</td>
        </tr>
        <tr>
            <td>TypeName-2</td>
            <td>Name 2</td>
            <td class="checkbox">checkbox 2</td>
        </tr>
    </tbody>
</table>

and in css using next selector like this

.type-1 ~ .checkbox {
    display: none;
}
user_111967710
Related