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

「*」

俗に、ユニバーサルセレクタと呼ばれるものです。全ての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エレメントを特定します。