How to set line color of a particular fxml chart using css?

Question

I would like to know how to define colors line and symbol for a specific chart with css.

Current css it's ok with class selector, but how to adapt that for a specific linechart with his Id #myChart ?

here is the code:

import java.io.File;
import java.io.IOException;
import java.net.URISyntaxException;
import java.net.URL;
import java.nio.file.Paths;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
import vue.VuetestCtrl2;



public class ChartTestMain extends Application {

    public static void main(String[] args) {  launch(args);}

    @Override
    public void start(Stage stage) throws Exception {  loadIhm( stage) ;}
        
    void loadIhm(Stage stage) throws URISyntaxException {
        
    URL location = ChartTestMain.class.getResource("/repTest/vuetest.fxml");    
    final FXMLLoader loader = new FXMLLoader(location);
    
   File fic = Paths.get(location.toURI()).toFile();
   System.out.println("fic = "+ fic);
   
    try {
        Parent root = (Parent) loader.load();   
        VuetestCtrl2 controller = (VuetestCtrl2) loader.getController();
        stage.setScene(new Scene(root));
        stage.show();

    } catch (IOException e) { e.printStackTrace(); }
  }

}

controller :

import java.net.URL;
import java.util.HashMap;
import java.util.Map;
import java.util.ResourceBundle;
import org.jfree.data.xy.XYSeriesCollection;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;

public class VuetestCtrl2 implements Initializable{
    
    @FXML   private NumberAxis xAxisLine;
    @FXML   private NumberAxis yAxisLine;   
    @FXML   private LineChart<Number,Number> xyChart;
    
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        
        XYChart.Series<Number, Number> serie = new XYChart.Series<Number, Number>();
        
        xyChart.getData().add(serie);
        
        
        serie.getData().add (new XYChart.Data<Number,Number>(10,10));
        serie.getData().add (new XYChart.Data<Number,Number>(50,5));
        serie.getData().add (new XYChart.Data<Number,Number>(100,30));
    } 
}

vuetest.fxml :

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.chart.LineChart?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="964.0" prefWidth="1209.0" stylesheets="@../../extension/extension.css" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="vue.VuetestCtrl2">
   <children>
      <LineChart id="myChart" layoutX="174.0" layoutY="108.0" prefHeight="475.0" prefWidth="750.0" fx:id="xyChart">
        <xAxis>
          <NumberAxis side="BOTTOM" fx:id="xAxisLine" />
        </xAxis>
        <yAxis>
          <NumberAxis fx:id="yAxisLine" side="LEFT" />
        </yAxis>
      </LineChart>
   </children>
</AnchorPane>

extension.css

.default-color0.chart-line-symbol { /* hollow circle */
    -fx-background-color: blue , white;
    -fx-background-radius: 6px;
    -fx-padding: 6px ;
    -fx-background-insets: 0, 2;
}

.default-color0.chart-series-line {
    -fx-stroke: blue ;
 }