How to use CSS in JavaFX Part 2 (Selector)
今回は前回の続きで CSS セレクタについてです。
CSS セレクタは JavaFX でも ほぼ W3C CSS と同様に利用できます。
ただし、JavaFX 1.2.1 で使えるセレクタは、
以下、それぞれのセレクタの説明を簡単にまとめました。
CSS セレクタの基本的な説明については W3C CSS の紹介ページが WEB上にたくさんありますので そちらを参照すると良いでしょう。
タイプ セレクタ
W3C では、要素名を指定しますが、JavaFX では JavaFX クラス名 を FQN で指定します。
"." は クラス セレクタの意味があるので、文字列として扱うため 必ず ダブルクォーテーションで括りましょう。
例えば、Scene 上の 全ての javafx.scene.shape.Rectangle の配色を green にする場合、次のように指定します。
"javafx.scene.shape.Rectangle" {
fill: green;
}
パッケージを含まない JavaFX クラス名でも指定可能です。
パッケージを問わず、指定したクラス名を持つクラスは全て対象となります。
もちろん、この場合 ダブルクォーテーションは不要です。
例えば、以下は パッケージを問わず Rectangle の配色を green にします。
javafx.scene.shape.Rectangle 以外に自分で作成した foo.bar.hoge.Rectangle 等も対象になります。
Rectangle {
fill: green;
}
ID セレクタ
ID セレクタは 以下のように JavaFX クラス名 + "#" + Node の id 値 の形式で指定します。
例えば、id が "hoge" の Rectangle のみ 配色を red にする場合は、次のように指定します。
"javafx.scene.shape.Rectangle"#hoge {
fill: red;
}
もちろん、以下のように JavaFX クラス名は省略することもできます。
通常 id を指定すれば Node は 一つに特定できるので 以下のように指定すればよいでしょう。
#hoge {
fill: red;
}
クラス セレクタ
クラス セレクタは 以下のように JavaFX クラス名 + "." + Node の styleClass 値 の形式で指定します。
例えば、styleClass が "foo" の Rectangle の 配色を blue にする場合は、以下のように指定します。
"javafx.scene.shape.Rectangle".foo {
fill: blue;
}
styleClass が "foo" の Node の配色を blue にする場合は、以下のように JavaFX クラス名 に * を指定します。
*.foo {
fill: blue;
}
もちろん、以下のように * を省略してもよいです。というより 省略した方が良いでしょう。
.foo {
fill: blue;
}
子孫 セレクタ
子孫 セレクタは タイプ セレクタ、ID セレクタ、クラスセレクタ を 半角スペースで区切って指定します。
以下のように指定した場合、VBox の配下にある全ての Rectangle の配色が red になります。
"javafx.scene.layout.VBox" "javafx.scene.shape.Rectangle" {
fill: red;
}
例えば、以下の場合 A と B の Rectangle が red になります。
Stage {
scene: Scene {
stylesheets: "{__DIR__}style.css"
content: [
VBox {
content: [
Group {
content: Rectangle { ... } // A
}
Rectangle { ... } // B
Circle { ... } // C
]
}
Rectangle { ... } // D
]
}
}
子供 セレクタ
子供 セレクタは タイプ セレクタ、ID セレクタ、クラスセレクタ を ">" で区切って指定します。
以下のように指定した場合、VBox の直下にある Rectangle の配色のみ red になります。
"javafx.scene.layout.VBox" > "javafx.scene.shape.Rectangle" {
fill: red;
}
例えば、以下の場合 B の Rectangle のみが red になります。
Stage {
scene: Scene {
stylesheets: "{__DIR__}style.css"
content: [
VBox {
content: [
Group {
content: Rectangle { ... } // A
}
Rectangle { ... } // B
Circle { ... } // C
]
}
Rectangle { ... } // D
]
}
}
疑似クラス セレクタ
:hover
Node の hover 変数が true の時 （Node にマウスカーソルを重ね合せた時） だけ スタイルが適用されます。
例えば、styleClass が "foo" の Node の hover 変数が true の時だけ 配色を red にする場合は、
.foo:hover {
fill: red;
}のように指定します。
:pressed
Node の pressed 変数 が true の時 （Node でマウスのボタンた押された時） だけ スタイルを適用できます。
例えば、styleClass が "foo" の Node の pressed 変数が true の時だけ 配色を blue にする場合は、
.foo:pressed {
fill: blue;
}のように指定します。
:focused
Node の focused 変数が true の時 （Node がフォーカスされている時） だけ スタイルが適用されます。
例えば、styleClass が "foo" の Node の focused 変数が true の時だけ 配色を green にする場合は、
.foo:focused {
fill: green;
}のように指定します。
