JavaFX 2 classes with different name have same css code

Question

🍄It may seem duplicate with this question but it is not working.

Two classes exist which extend HBox and have one TextField element.I have added on each one a StyleClass 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?

Answer 1

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.

Answer 2

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.