「CSSの基本とCSSセレクター」をExt JSで利用する場合に、どのようなコードを記述するのか?について学んでいきます。
各セレクタの説明は、「CSSの基本とCSSセレクター」とかぶるので、極力省いていきます。
<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>
Ext.select( ‘div#foo * a‘, true ).each(function(el){
el.highlight();
});
<h1>Ext JS 実践開発ガイド</h1>
Ext.select( ‘h1‘, true ).each(function(el){
el.highlight();
});
<ul>
<li>
<a href="http://www.extjs.com/">Ext JS</a>
</li>
</ul>
Ext.select( ‘ul li a‘, true ).each(function(el){
el.highlight();
});
<h1>
<p>Ext JS 実践開発ガイド</p>
<div>
<p>サブタイトル</p>
</div>
</h1>
Ext.select( ‘h1 > p‘, true ).each(function(el){
el.highlight();
});
Ext.select( ‘h1 / p‘, true ).each(function(el){
el.highlight();
});
<p>Pタグ1</p>
<div>DIVタグ1</div>
Ext.select( ‘p + div‘, true ).each(function(el){
el.highlight();
});
<p>Pタグ1</p>
<div>DIVタグ1</div>
<p>Pタグ2</p>
<span>SPANタグ1</span>
<div>DIVタグ2</div>
Ext.select( ‘p ~ div‘, true ).each(function(el){
el.highlight();
});