同じコントロールで異なるcssを適用したい

Question

TableViewのセルのスタイルをcssで次のように定義しました。

.table-view .table-cell {
    -fx-text-fill: red; ･･････
}

TableViewが二つある場合にどちらのTableViewにも同じように表示されますが
この二つにそれぞれ別のスタイルを適用させたいのですが、どのように記述すれば
よいか解らず困っています。

もし、ご存知でしたらご教示いただけすまでしょうか。

Answer 1

「.table-view」ということはclassを使っているのでしょうか。
要素個別の場合、idを使うとできます。

・
・
・

        <TableView id="tableViewLeft" layoutX="14.0" layoutY="14.0" prefHeight="200.0" prefWidth="200.0">
・
・
・

        <TableView id="tableViewRight" layoutX="235.0" layoutY="14.0" prefHeight="200.0" prefWidth="200.0">
・
・
・

#tableViewLeft {
    -fx-border-color: red;
}

#tableViewRight {
    -fx-border-color: green;
}

Comments

[XCUBE]

ご回答ありがとうございます。

質問の標題が抽象的すぎて意図が解りずらかったかもしれませんが、TableViewの中のセルについて別々のスタイルを適用させたいのです。

よろしくお願いします。

[java-beginner]

調べた結果、以下の方法がありました。

CSSに以下を定義し、

```
.tableCellClass {
-fx-background-color: red;
}
```

以下のようにinitialize()メソッドに記述することで
テーブルのセルで、末尾が「a」で終わるものにgetStyleClass().add()でクラス名を追加することができます。

```
public class AppController implements Initializable {

@FXML TableColumn<Person, String> firstNameCol;

@Override
public void initialize(URL location, ResourceBundle resources) {

firstNameCol.setCellFactory(new Callback<TableColumn<Person, String>, TableCell<Person, String>>() {
@Override public TableCell<Person, String> call(final TableColumn<Person, String> personStringTableColumn) {
return new TableCell<Person, String>() {
@Override protected void updateItem(final String item, final boolean empty) {
super.updateItem(item, empty);
setText(empty ? "" : item);
if (item == null) {
return ;
}

// スタイル設定部分
if (item.endsWith("a")) {
getStyleClass().add("tableCellClass");
}
}
};
}
});

}

}
```

[XCUBE]

わざわざ調べていただいたようでありがとうございます。

ちょっと私には難解なコードですが、idとセレクタを紐付けるのではなく、セルに直接セレクタを設定する方法ですね。

なるほどこういう方法があったんですね。試してみます。