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

お問い合わせ 資料請求 無料見積り

お電話でお気軽にお問い合わせくださいTel 03-6805-2904 営業時間 [平日]AM 9:30 - PM 6:30

Ext JSによるCSSセレクタの利用

Ext JSによるCSSセレクタの利用について

「CSSの基本とCSSセレクター」をExt JSで利用する場合に、どのようなコードを記述するのか?について学んでいきます。

各セレクタの説明は、「CSSの基本とCSSセレクター」とかぶるので、極力省いていきます。

エレメントセレクタ

*
HTMLコード
<div id="foo">

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

    <span>
        <a href="http://code.xenophy.com">code:x</a>
    </span>

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

</div>
JSコード
Ext.select( ‘div#foo * a‘, true ).each(function(el){

    el.highlight();

});
E
HTMLコード
<h1>Ext JS 実践開発ガイド</h1>
JSコード
Ext.select( ‘h1‘, true ).each(function(el){

    el.highlight();

});
E F
HTMLコード
<ul>
    <li>
        <a href="http://www.extjs.com/">Ext JS</a>
    </li>
</ul>
JSコード
Ext.select( ‘ul li a‘, true ).each(function(el){

    el.highlight();

});
E > F または E/F
HTMLコード
<h1>
    <p>Ext JS 実践開発ガイド</p>
    <div>
        <p>サブタイトル</p>
    </div>
</h1>
JSコード
Ext.select( ‘h1 > p‘, true ).each(function(el){

    el.highlight();

});

Ext.select( ‘h1 / p‘, true ).each(function(el){

    el.highlight();

});
E + F
HTMLコード
<p>Pタグ1</p>
<div>DIVタグ1</div>
JSコード
Ext.select( ‘p + div‘, true ).each(function(el){

    el.highlight();

});
E ~ F
HTMLコード
<p>Pタグ1</p>
<div>DIVタグ1</div>
<p>Pタグ2</p>
<span>SPANタグ1</span>
<div>DIVタグ2</div>
JSコード
Ext.select( ‘p ~ div‘, true ).each(function(el){

    el.highlight();

});