How to keep css style for only one element

Question

I have this CSS style in my application:

.list-cell {
    -fx-background-color: null;
    -fx-font-size: 24px;
    -fx-text-fill: linear-gradient( from 0.0% 0.0% to 0.0% 50.0%, reflect, rgba(255,0,0,0.28) 0.0, rgba(102,243,255,0.58) 50.0, rgba(179,179,179,0.45) 70.0, rgba(179,179,179,0.45) 100.0);
}
.list-cell:hover {
    -fx-text-fill:linear-gradient( from 0.0% 0.0% to 100.0% 100.0%, reflect, rgb(255,255,255) 0.0, rgb(255,255,77) 100.0);
}

And I apply it to my program:

scene.getStylesheets().add(getClass().getResource("/com/root/tomaszm/Design.css").toExternalForm());

And I would like to use this style only for one ListView node not for any other. I have problem that new ComboBox inherit this style.

I know thats probably basic thing but Im not yet familiar with CSS, and just looking for quick fix...

EDIT:

@CHARSET "UTF-8";

#mainList .list-cell {
    -fx-background-color: null;
    -fx-font-size: 24px;
    -fx-text-fill: linear-gradient( from 0.0% 0.0% to 0.0% 50.0%, reflect, rgba(255,0,0,0.28) 0.0, rgba(102,243,255,0.58) 50.0, rgba(179,179,179,0.45) 70.0, rgba(179,179,179,0.45) 100.0);
}
#mainList .list-cell:hover {
    -fx-text-fill:linear-gradient( from 0.0% 0.0% to 100.0% 100.0%, reflect, rgb(255,255,255) 0.0, rgb(255,255,77) 100.0);
}

Application class

scene.getStylesheets().add(getClass().getResource("/com/root/tomaszm/Design.css").toExternalForm());

controller class

listView.getStyleClass().add("mainList");

Answer 1

You have to add style class to your ListView

   listView.getStyleClass().add("mylist");

your css

 #mylist   .list-cell {
        -fx-background-color: null;
        -fx-font-size: 24px;
        -fx-text-fill: linear-gradient( from 0.0% 0.0% to 0.0% 50.0%, reflect, rgba(255,0,0,0.28) 0.0, rgba(102,243,255,0.58) 50.0, rgba(179,179,179,0.45) 70.0, rgba(179,179,179,0.45) 100.0);
    }
  #mylist   .list-cell:hover {
        -fx-text-fill:linear-gradient( from 0.0% 0.0% to 100.0% 100.0%, reflect, rgb(255,255,255) 0.0, rgb(255,255,77) 100.0);
    }

You can read the doc for more explanations http://docs.oracle.com/javafx/2/css_tutorial/jfxpub-css_tutorial.htm

Answer 2

The way you have written your css, you need to set the css id to your node and not a styleclass in your controller.

Background

A node can have both

• styleclass (represented by .styleclass {...} )
• css id (represented by #id {...} )

From the JavaDocs:

The Node class contains id, styleClass, and style variables that are used in styling this node from CSS. The id and styleClass variables are used in CSS style sheets to identify nodes to which styles should be applied. The style variable contains style properties and values that are applied directly to this node.

Difference

getStyleClass().add("mainList") sets the styleClass of a node and is used in the css file by declaring :

.mainList {
   ...
}

For declaring an id to a node (lets taking your example), you should use :

listView.setId("mainList");

You use the id as you have already used in the css file:

#mainlist{
    ...
}

A styleclass normally targets a set of same type of nodes where as css id targets a particular node (but it is not mandatory)

Note : Do not confuse id and fx:id. Both are used for differently and have different implementations. For more information, click me!