Ext JSやRapid Driveなど
システム開発の技術情報をご紹介。

E[foo]

Eの次に[foo]とありますが、このfooはタグ属性を表します。例えば、次のように記述すると、Pタグにclass要素が指定されているものに対してCSSが適用されます。

p[class] {

color: red;
}

HTMLは、次の通りになります。

<p class="foo">クラスを持つPタグ</p>
<p>クラスを持たないPタグ</p>

class属性が設定されていないPタグには、CSSは適用されません。

E[foo=bar]

この形式は、先ほどの属性値指定に、さらに値指定をしたものです。

p[class="x-foo"] {

color: red;
}

HTMLは、次の通りです。

<p class="x-foo">x-fooがクラスで指定されているPタグ</p>
<p class="x-bar">x-barがクラスで指定されているPタグ</p>

class属性が指定されていて、かつそのclass属性の値がx-fooの場合CSSを適用します。

E[foo^=bar]

先ほどと同じような形ですが、=の前に^がついています。このように記述すると、barという接頭辞（プレフィックス）が一致するものに対してCSSが適用されます。

p[class^="x-"] {

color: red;
}

先ほど、同様のHTMLをみてみましょう。

<p class="x-foo">x-fooがクラスで指定されているPタグ</p>
<p class="x-bar">x-barがクラスで指定されているPタグ</p>

今回は、両方のPタグに対してCSSが適用されました。これは、x-で始まるclass属性が設定されているものに対して設定するということが確認できます。

E[foo$=bar]

次は、接頭辞の反対で、接尾辞（サーフィックス）指定を行う方法です。先ほどの^は、先頭の文字列でしたが、$を使うと後ろの文字列が検査対象になります。

p[class$="oo1"] {

color: red;
}

HTMLは、次の通りです。

<p class="x-foo1">x-foo1がクラスで指定されているPタグ</p>
<p class="x-foo2">x-foo2がクラスで指定されているPタグ</p>
<p class="x-woo1">x-woo1がクラスで指定されているPタグ</p>
<p class="x-bar">x-barがクラスで指定されているPタグ</p>

後ろからみて、oo1になっている2つのPタグのみがCSSが適用されます。

E[foo*=bar]

この形式は、barで指定した文字列が、含まれる場合にCSSが適用されます。

p[class*="foo"] {
     color: red;
}

HTMLは、次の通りです。

<p class="x-foo1">x-foo1がクラスで指定されているPタグ</p>
<p class="x-foo2">x-foo2がクラスで指定されているPタグ</p>
<p class="y-foo1">y-foo1がクラスで指定されているPタグ</p>
<p class="y-foo2">y-foo2がクラスで指定されているPタグ</p>

class属性の値にfooが含まれているDOMエレメントですので、上記の場合だと、すべてが対象になります。

E[foo%=2]

fooに設定された属性が2個設定されている、DOMエレメントが選択されます。しかし、これはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。

E[foo!=bar]

fooに設定された値がbarで無いDOMエレメントが選択されます。しかし、これはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。