Discussion :

[sportman1969]

Bonjour,

J’essaye d'associer un sélecteur CSS à un nœud (TabPane). J’ai bien lu qu’il y avait 3 manières (http://java.developpez.com/faq/javaf...s-sur-un-noeud). Mais dans mon cas, le TabPane est Parent (si je peux dire). Et donc, si je souhaite associer la css à ce TabPane (et non à la scène), la css est malgré tout appliquée à tous mes nœuds enfants.
Si je souhaite utiliser l’id ou la classe de style, je ne vois pas comment je peux faire car ma css contient plusieurs blocs de règles pour le TabPane. De plus, elle contient des blocs de règles pour les Tab.

CSS :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.tab-pane .tab-header-area .tab-header-background{
    -fx-opacity: 0;
}
 
.tab {
    -fx-background-color: GAINSBORO;
}
 
.tab:selected {
    -fx-background-color: ORANGE;
}
 
.tab .tab-label { 
    -fx-alignment: CENTER;
    -fx-text-fill: #828282;
    -fx-font-size: 12px;
    -fx-font-weight: bold;
}
 
.tab:selected .tab-label { 
    -fx-alignment: CENTER;
    -fx-text-fill: WHITE;
}
 
.tab{
    /*-fx-background-insets: 0 1 0 1,0,0;*/
    -fx-background-insets: 0, 0 0 1 0;
}
 
.tab-pane:top *.tab-header-area {
    -fx-border-color: ORANGE; 
    -fx-border-width: 0 0 5 0;
}

Quelqu'un peut m'aider ?

Merci d'avance

[bouye]

Chaque nœud Parent dispose d'une méthode getStyleSheets() pour ajouter une(des) feuille(s) de style a ce parent.
Sinon ca se resoud aussi tres bien en ajoutant un styleClass propre a ce nœud.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

getStyleClass().add("mon-style-de-classe");

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.mon-style-de-classe {
    [...]
}

Aussi si c'est une classe custom qui hérite de Region tu peux surcharger getUserAgentStylesheet() pour définir une feuille de style par défaut qui sera chargée et initialisée lorsque le nœud est instancié (elle s'applique donc AVANT celle de la scène).

[sportman1969]

Oui, pas de problème quand c'est un cas 'simple'.
Mais dans le cas où il y a plusieurs sélecteurs par définition de style comme ici :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.tab-pane .tab-header-area .tab-header-background {
    -fx-opacity: 0;
}

comment fait-on ?

Ceci, par exemple, ne fonctionne pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
tabPane.getStyleClass().add("mainTabPane");
tab.getStyleClass().add("mainTab");

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.mainTabPane mainTab-header-area mainTab-header-background{
    -fx-opacity: 0;
}

[bouye]

Tes sélecteurs CSS sont mal nommés :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
public class Main extends Application {
 
    @Override
    public void start(Stage primaryStage) {
        final TabPane tabPane1 = createTabPane();
        final TabPane tabPane2 = createTabPane();
        tabPane2.getStyleClass().add("my-tab-pane");
        final SplitPane root = new SplitPane();
        root.setStyle("-fx-background-color: green;");
        root.getItems().setAll(tabPane1, tabPane2);
        final Scene scene = new Scene(root);
        final Optional<URL> cssURL = Optional.ofNullable(getClass().getResource("Main.css"));
        cssURL.ifPresent(url -> scene.getStylesheets().add(url.toExternalForm()));
        primaryStage.setScene(scene);
        primaryStage.setWidth(500);
        primaryStage.setHeight(500);
        primaryStage.show();
    }
 
    private TabPane createTabPane() {
        final TabPane result = new TabPane();
        IntStream.range(0, 5)
                .mapToObj(index -> new Tab(String.valueOf(index)))
                .forEach(result.getTabs()::add);
        return result;
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.my-tab-pane .tab-header-area .tab-header-background {
    -fx-opacity: 0;
}

[sportman1969]

Non, si j'effectue ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.my-tab-pane .tab-header-area .tab-header-background {
    -fx-opacity: 0;
}

la zone tab-header-area et tab-header-background de mes autres TabPane sont également modifié par ma CSS, ce que je ne souhaite pas.

[bouye]

Comme l'exemple que j'ai posté, et que visiblement tu n'as pas testé, le montre ce n'est pas possible sauf si tu as fait l'erreur de donner exactement le même style de classe a tes autres TabPane