Change selection color of a JavaFX TreeTableView

Question

I'm having a little trouble regarding FX, CSS and the TreeTableView. I have cells containing blue Hyperlinks. Now if the cell is selected, the background becomes blue and thus the link is practically invisible. I'd now like to change the background color of selected cells using Stylesheets.

For TreeView the following works fine:

.tree-view .tree-cell:selected{
    -fx-background-color: green;
}

So analogously I tried:

.tree-table-view .tree-table-cell:selected{
    -fx-background-color: green;
}

But this had no effect. Surprisingly though I was able to change the general background color with this:

.tree-table-view .tree-table-cell{
    -fx-background-color: yellow;
}

The cells were now all yellow but this is seems to override the default selection pattern as now even selected rows had a yellow background.

For me it seems as if the state selector does not apply to TreeTableView cells but I have no clue how to achieve this another way.

I also tried this with the Example 15-2 from the JavaFX documentation, getting the same unsatisfying result.

I was not able to find any solution on the web as all questions seem to regard TreeViews or TableViews but not the combined TreeTableView. So any hint or link to the right doc would be very helpful!

Thanks in advance!

PS: I am aware that one could cirumvent the problem by changing the color of the Hyperlink but there must be a way to change the cell's color, right?

Answer 1

You can use the .tree-table-row-cell selector with the -fx-background-color property you mentioned:

.tree-table-row-cell:selected {
    -fx-background-color: green;
}

and you can also change the border color to better fit to the filling color:

.tree-table-row-cell:selected {
    -fx-background-color: green;
    -fx-table-cell-border-color: green;
}

You may apply more styles to the underlying table cell by using:

.tree-table-row-cell:selected > .tree-table-cell{
    /*enter style rules here*/
}