JavaFX TitledPane can't override -fx-text-fill

Question

I'm trying to change the title color of my TitledPane when they are pressed, but I can't manage to do that. This is my css:

.titled-pane * {
    -fx-background-color: transparent;
}
.titled-pane .title{
    -fx-background-color: #666666;
}
.titled-pane .title:hover {
    -fx-background-color: #AAAAAA;
}
.titled-pane .title:pressed {
    -fx-background-color: #DDDDDD;
    -fx-text-fill: black;  // does not work
}

The background settings work fine, so I don't understand what's the problem.

I've seen this question, but I don't know how to apply the solution to my case.

Thanks in advance.

Answer 1

If you have a look at how style is applied to a TitledPane in modena.css, you'll see that the text is styled on the root selector:

.titled-pane {
    -fx-text-fill: -fx-text-base-color;
}

So you just need to apply the desired text color on the root pressed state:

.titled-pane * {
    -fx-background-color: transparent;
}
.titled-pane:pressed {
    -fx-text-fill: red;
}
.titled-pane .title{
    -fx-background-color: #666666;
}
.titled-pane .title:hover {
    -fx-background-color: #AAAAAA;
}
.titled-pane .title:pressed {
    -fx-background-color: #DDDDDD;
}