In my tree-table-view I have a root item which contains child items(I have mistakenly called them root items) that in turn have child items. I need to customize those mistakenly called root items rows text appearance. Is there such a selector or how else would that be done?
Thanks.
This will set a pseudo-class on the row containing the root:
final PseudoClass firstRowClass = PseudoClass.getPseudoClass("first-row");
treeTableView.setRowFactory(treeTable -> {
TreeTableRow<...> row = new TreeTableRow<>();
row.treeItemProperty().addListener((ov, oldTreeItem, newTreeItem) ->
row.pseudoClassStateChanged(firstRowClass, newTreeItem == treeTable.getRoot()));
return row ;
});
Now you can select that row in css with
.tree-table-row-cell:first-row { ... }
Complete example here
It sounds like you want to style the immediate child nodes of the root node. In this case, just do
row.treeItemProperty().addListener((ov, oldTreeItem, newTreeItem) ->
row.pseudoClassStateChanged(firstRowClass,
newTreeItem != null && newTreeItem.getParent() == treeTable.getRoot()));
instead of the condition in the code above. Obviously, you can use other criteria as you need them (e.g. ! newTreeItem.isLeaf()
).
Note that the default style sheet rules for tree-table-row
are a little strange: -fx-background-color
is set for the row, but -fx-text-fill
is set for both the row and the cells inside it. So if you want to change the background color, you just need
-tree-table-row-cell:first-row {
-fx-background-color: antiquewhite ;
}
but if you want to change the text color, you need to change it on the cells:
-tree-table-row-cell:first-row .tree-table-cell {
-fx-text-fill: red ;
}