Reputation: 7255
🍄It may seem duplicate with this question but it is not working.
Two classes exist which extend
HBox
and have oneTextField
element.I have added on each one aStyleClass
like this:
//for one class
getStyleClass().add("search-box");
//for the other class
getStyleClass().add("libraries-search-box");
So i am modifing the appearence of their
TextField
with the above css code:
.search-box .text-field {
-fx-background-color: white;
-fx-background-insets:3.0;
-fx-background-radius: 5.0;
.....
}
.libraries-search-box .text-field {
-fx-background-color: white;
-fx-background-insets:3.0;
-fx-background-radius: 5.0;
....
}
I want to replace the duplicate code and i try:
.search-box , .libraries-search-box .text-field {
-fx-background-color: white;
-fx-background-insets:3.0;
-fx-background-radius: 5.0;
...//
}
but it works only for '.libraries-search-box
'.How i get get it work for both?
Upvotes: 3
Views: 222
Reputation: 21799
The correct format is:
.search-box .text-field, .libraries-search-box .text-field {
-fx-background-color: white;
-fx-background-insets:3.0;
-fx-background-radius: 5.0;
...//
}
In your example you defined the CSS attributes for the .search-box
and the .libraries-search-box .text-field
class selectors.
Upvotes: 1
Reputation: 44965
You need to specify .text-field
to both .search-box
and .text-field
, as next:
.search-box .text-field, .libraries-search-box .text-field {
-fx-background-color: white;
-fx-background-insets:3.0;
-fx-background-radius: 5.0;
...//
}
Indeed .search-box , .libraries-search-box .text-field
is seen as .search-box
or .libraries-search-box .text-field
not as .search-box .text-field
or .libraries-search-box .text-field
as you expect.
Upvotes: 5