CODEWITHSUNDEEP
css-selectorsjavafx-8
József Legoza
József Legoza

Reputation: 45

Mixing id- and class-selectors in CSS with JavaFX 8

Is there a way to make class- and id-selectors work together in JavaFX 8?

E.g.: I´d like to style a progressbar the following way:

.myprogressbar #greenBar .bar {
    -fx-background-color: green;
}

This solution used to work before JavaFX 8.

Upvotes: 1

Views: 2884

Answers (2)

Alessandro Giusa
Alessandro Giusa

Reputation: 1768

If you want to set a css style by id but just for a part of a node, the following code snippet did the trick for me:

In my css stylesheet file I defined this:

#agile-board *.split-pane-divider  {
   -fx-background-color: #C9C9C9;
   -fx-border-style: dashed;
   -fx-border-width: 1px;
}

In my class where I wanted to use this style I did this:

this.board = new SplitPane();
this.board.setId("agile-board");

The node got the style wit the id #agile-board applied but just the divider of that SplitPane.

Good programming :-)

Upvotes: 1

James_D
James_D

Reputation: 209330

Your css selector is matching a Node with class "bar" which is a descendant of a Node with id "greenBar" which in turn is a descendant of a Node with class "myprogressbar".

I assume you're setting the class "myprogressbar" and the id "greenBar" on the same node (a ProgressBar). To match this, you need to remove the space between .myprogressbar and #greenBar:

.myprogressbar#greenBar .bar {
    -fx-background-color: green;
}

Upvotes: 6

Related Questions