0

I'm looking for a solution to not override styling on table cells during hover IF the cell contains a SPAN tag (this span also has a class applied named isThreshold) OR the div cell contains the class .row_select).

The following works and prevents the override if it contains .row_select, but finding a way to look ahead and see if it contains a span tag doesn't seem to work:

.webix_column > div.webix_cell.gridRowHover:not(.webix_row_select) {  //this works
  color: red;
}

.webix_column > div.webix_cell.gridRowHover:not(span) {  //doesn't work
  color: red;
}

EDIT using the following I almost get there as it doesn't affect the cell, but specifically targets the span tag. Having it not affect the cell at all including the span tag is what I really need if the .webix_row_select and span tag are present.

.webix_column > div.webix_cell.gridRowHover:not(.webix_row_select) > span
    
//Markup
<div role="gridcell" aria-rowindex="1" aria-colindex="4" aria-level="1" class="webix_cell">
   <span class="isThreshold">1</span>
</div>

<div role="gridcell" aria-rowindex="2" aria-colindex="4" aria-level="1" class="webix_cell 
 row_select">
   <span class="isThreshold">1</span>
</div>

Any ideas how I can account for both scenarios onHover? The class .gridRowHover is dynamically injected on hover which is what I have been using to target things.

Thanks in advance

Trag
  • 73
  • 7
  • Does this answer your question? [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – disinfor May 25 '22 at 14:19

1 Answers1

1

Ok, I discovered that !important was hosing things for me and dropping them and simply targeting the table cell on hover was sufficient enough to do what I needed. And this is why you dont use those (!important) unless you really need to do so.

Thanks to anyone that was looking at this.

Trag
  • 73
  • 7