Ext JS 実践開発ガイド Vol.2

第２回目になる、Ext JS開発ガイドです。今回は、「CSSの基本とCSSセレクター」を一気に解説します。

CSSの基本とCSSセレクター

CSSはご存じでしょうか？CSS(Cascading Style Sheet)は、いまや当たり前に使われるようになりました。このCSSは、ビジュアル的な部分を定義するために存在します。

では、このカスケーディングと呼ばれる理由は何でしょうか。「階段状になった滝」という意味らしいです。これじゃピンとこないかもしれません。

記述方法が、連なっていてそれぞれが階層を意味しているといえばわかりやすいでしょうか。既にCSSを日々使われている方からするとごく当たり前のことかもしれません。

それでは、CSSセレクタはご存じでしょうか。以外と言葉自体を知らない方は多いようです。私もその1人でした。

ここでは、CSSセレクタをExt JSを使いながらみていきます。今回はW3C CSS3 SelectorsとExt JSのAPI Documentationをベースに解説します。

先に簡単にCSSセレクタについて確認しておきます。CSSセレクタとは、CSSでドキュメント内のDOMエレメント（HTMLエレメント：以下DOMエレメント）を特定する手段を指します。

つまり、デザイナの方が日々CSSで色をつけたり背景を指定したりしている記述そのものがCSSセレクタです。ドキュメントの中に存在するタグ（DOMエレメント／HTMLエレメント）を指定した条件で絞り込み、該当するタグに対してデザイン設定を行うというのが通常のCSSのデザイン作業になります。

Ext JSでは、このCSSセレクタを使ってDOMエレメントを取得し操作することが可能です。この方式を知っているのと知らないのでは、コーディング量が大幅に変動しますので、初期の段階でしっかり押さえておくことをおすすめします。

まず、セレクタの種類を確認し、それからExt JSでどのように扱うかについて触れたいと思います。CSSセレクタは、大きく分けて4つに分類することができます。

以下の確認コードは、基本的にFireFox 3.0で動作確認していますが、FireFox 3.0が対応していないものでSafariでなどを利用する場合があります。Safariなど他のブラウザで確認しなければならないものについては、都度記載します。

エレメントセレクタ

「*」

俗に、ユニバーサルセレクタと呼ばれるものです。全てのDOMエレメントを指します。
また、次のように間にいることで、*部分のDOMエレメントは全てのDOMエレメントを指します。

div#foo * a {
     font-weight: bold;
}

上記の例では、divのIDがfooの下にあるあらゆるDOMエレメントの下にあるAタグに対してCSSを適用しています。HTMLとしては、次のコード内の太字のAタグが適用されます。

<div id="foo">
    <p>
        <a href="http://www.xenophy.com">株式会社ゼノフィ</a>
    </p>
    <span>
        <a href="http://www.xenophy.com">株式会社ゼノフィ</a>
    </span>

    <a href="http://www.google.com/">Google</a>
</div>

「E」

Eは、DOMエレメントの略です。こういう書き方をされるとちょっとわかりずらいと思いますが、たくさん出てくるので覚えてきましょう。

具体的には、次のような普段よく使われているようなコードになります。

h1 {
    
font-size:18px;
}

HTMLは次の通りです。

<h1>Ext JS 実践開発ガイド</h1>

DOMエレメントの種類を記述すると、該当のDOMエレメントに対して指定したCSSができようできるという例です。ここでは、h1タグ内の文字サイズを18pxに設定しました。

「E F」

先ほどの、E=Elementの略ですといいましたが、Fは単純にEの次なんで・・・。EとFの間には半角スペースが入っています。

これは、DOMエレメントのネスト構造を指定してCSSを設定することができるということです。

ul li a {
    
font-size:24px;
}

ULタグのしたのLIタグしたのAタグに対してCSSを適用します。

HTMLは次の通りです。

<ul>
    <li>
        <a href="http://www.extjs.com/">Ext JS</a>
    </li>
</ul>

また、次のように記述することもできます。

ul a {
  
font-size:24px;
}

LIタグの仕手が消えました。しかしCSSは適用されます。これは、正確なネスト構造の順番を記述する必要はなく、指定したいDOMエレメントのネスト構造が定義できていれば、CSSセレクタは正常にDOMエレメントを特定します。

「E > F または E/F」

子セレクタ （Child combinator）と呼ばれる形式です。親要素の直接の子要素に対してスタイルを指定します。孫要素以下は対象になりません。

h1 > p {
    
font-size:20px;
}

HTMLは次の通りです。

<h1>
    <p>Ext JS 実践開発ガイド</p>
    <div>
         <p>サブタイトル</p>
    </div>
</h1>

[Ext JS 実践開発ガイド]の文字列だけが、先に定義したCSSが適用されます。DIVタグの中にあるPタグ（サブタイトル）には適用されません。

ブラウザで適用させる場合には、上記の通りですが、Ext JS内のCSSセレクタでは、>の代わりに/を使うことができます。

h1/p

これについては、Ext JSでの利用コード説明時に解説します。

「E + F」

隣接セレクタ （Adjacent sibling combinator）と呼ばれる形式です。EというDOMエレメントから見て、直接の弟要素であるFというDOMエレメントにCSSを適用します。

さて、「弟要素」という言葉が出てきましたが、なんでしょうか。「どうせ、子要素のことでしょ？」なんて思わないでくださいね。弟要素とは、次のようなDOMエレメントの関係をいいます。

<p>Pタグ1</p>
<div>DIVタグ1</div>

Pタグの次のタグがDIVタグになっています。このDIVタグを弟要素といいます。Pタグ移行のタグが弟になるわけです。

上記のDIVタグにCSSを適用するためのコードは次の通りです。

p + div {
     font-size:24px;
}

次の例ではどうでしょうか。

<p>Pタグ1</p>
<div>DIVタグ1</div>
<p>Pタグ2</p>
<span>SPANタグ1</span>
<div>DIVタグ2</div>

太字の部分は、CSSが適用されますが、DIVタグ2には適用されません。間にSPANタグがあるため、Pタグの直後の弟要素ではないからです。また、このときのPタグを兄要素といいます。+を使った表現は、直後のDOMエレメントを表現する場合に用います。

「E ~ F」

間接セレクタ （General sibling combinator）と呼ばれる形式です。先ほどの+を使った方式は、直前、直後の弟要素についてCSSを適用するための形式でした。

~（チルダ）を使った、この方式は、先ほどのように直前、直後ではない弟要素についてもCSSを指定することができます。

p ~ div {
     font-size:24px;
}

HTMLは、次の通りです。

<p>Pタグ1</p>
<div>DIVタグ1</div>
<p>Pタグ2</p>
<span>SPANタグ1</span>
<div>DIVタグ2</div>

先ほど違い、Pタグの直後でなくても、弟要素であれば、CSSが適用されるようになります。

 

属性セレクタ

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での動作確認時に解説します。

 

疑似セレクタ

E:first-child

Eの親要素の最初の子要素として出現した、Eで指定されたDOMエレメントに対してCSSを適用します。

p:first-child {
 
  color: red;
}

div p:first-child {
     color: blue;
}

一つ目は、ドキュメントの中に出てくる最初のPタグに対してCSSを適用しています。2つめは、DIVタグの中に出現する最初のPタグに対してCSSを適用しています。

HTMLは、次の通りです。

<p>文章 文章 文章</p>
<p>文章 文章 文章</p>

<div>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
</div>

<div>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
</div>

E:last-child

E:first-childの逆になります。最後に出現したEに対してCSSを適用します。

p:last-child {
    
color: red;
}

div p:last-child {
     color: blue;
}

HTMLは、次の通りです。

<p>文章 文章 文章</p>

<div>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
</div>

<div>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
</div>

<p>文章 文章 文章</p>

E:nth-child(n)

Eで指定されたDOMエレメントのうち、その親要素のn番目の子要素であるDOMエレメントに対してCSSを適用します。

※このコードはSafari4.0で確認してください。

div p:nth-child(3) {
     color: red;
}

DIVタグの中に出現する三番目のPタグに対してCSSを適用しています。

HTMLは、次の通りです。

<div>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
</div>

次のように3番目の要素が、Pタグでない場合は、CSSは適用されません。

<div>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <span>SPAN</span>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
</div>

E:nth-child(odd)

oddを指定すると、出現場所が奇数の場合CSSが適用されます。

※このコードはSafari4.0で確認してください。

div p:nth-child(odd) {
    
color: red;
}

HTMLは、次の通りです。

<div>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
</div>

E:nth-child(even)

oddの逆で、出現場所が偶数の場合のみCSSが適用されます。

※このコードはSafari4.0で確認してください。

div p:nth-child(even) {
    
color: red;
}

HTMLは、次の通りです。

<div>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
</div>

E:only-child

Eで指定されたDOMエレメントのうち、その親要素内で唯一の子要素である （兄弟要素を持たないエレメント）に対してCSSを適用します。

div p:only-child {
    
color: red;
}

HTMLは、次の通りです。

<div>
  <p>文章 文章 文章</p>
</div>

<div>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
</div>

二つ目のDIVタグにはPタグが2つ存在し、兄弟関係にあります。なので、CSSは適用されません。

E:checked

ラジオボタン、チェックボックスがチェックされた状態のときにスタイルを指定します。

div input:checked + span {
    
color: red;
}

HTMLは、次の通りです。

<div>
    <input type="checkbox" /><span>チェックボックス</span>
</div>

+を使って、inputタグの弟要素に対してCSSを設定しています。

E:first

これはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。

E:last

これはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。

E:nth(n)

これはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。

E:odd

これはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。

E:even

これはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。

E:contains(foo)

これはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。

E:nodeValue(foo)

これはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。

E:not(S)

Eで指定されたDOMエレメントのうち、sでないものにCSSを適用します。

p:not(.x-bar) {
    
color: red;
}

HTMLは、次の通りです。

<p class="x-foo">文章 文章 文章</p>
<p class="x-bar">文章 文章 文章</p>
<p class="x-foo">文章 文章 文章</p>

x-barにはCSSが適用されません。条件としては、x-barでないPタグに対してCSSを適用する形になっています。

E:has(S)

これはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。

E:next(S)

これはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。

E:prev(S)

これはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。

CSS値セレクタ

E{display=none}

これはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。

E{display^=none}

これはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。

E{display$=none}

これはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。

E{display*=none}

これはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。

E{display%=2}

これはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。
E{display!=none}

これはW3Cで定義されているものではないので、もちろんブラウザでも確認できないため、Ext JSでの動作確認時に解説します。

 

次回予告

いかがでしたでしょうか、ここで紹介した以外にもCSSセレクタはたくさんあります。今回紹介したのはExt.DomQueryというクラスで説明されているCSSセレクタです。なのでExt JS内でしか利用できないものもあります。これに関しては「Ext JS 自薦開発ガイド Vo.4：Ext JSによるCSSセレクタの利用 」にて説明したいと思います。

次回、「Ext JS 実践開発ガイド Vol.3：モダンJavaScript」をお楽しみに。