CSS セレクター(CSS selector)
CSS セレクター(CSS selector）は、jQueryの$()関数の中で指定する書式です。CSSと同じ表記を採用しているので、すぐに慣れる事ができます。
| セレクター | 意味 |
| * | すべての要素 |
| elm | elmのすべて |
| elm1 elm2 | elm1の子要素elm2 |
| elm1 > elm2 | elm1の直接の子要素であるelm2(親子関係を表示） |
| elm1 + elm2 | elm1と兄弟関係にある要素の中で、elm1の直後にある要素elm2 |
| elm1 ~ elm2 | elm1と兄弟関係にある要素の中で、elm1の後にあるすべての要素elm2 |
| elm1:has(elm2) | 子要素に少なくとも一つelm2がある要素elm1 |
| elm.class | クラス名がclassのすべての要素elm |
| elm#id | ID名がidのすべての要素elm |
| elm[attr] | 属性名がattrのすべてのelm |
| elm[attr=val] | 属性attrの値がvalのすべての要素elm |
| elm[attr^=val] | 属性attrがvalで始まるすべての要素elm |
| elm[attr$=val] | 属性attrがvalで終わるすべての要素elm |
| elm[attr*=val] | 属性attrの値がvalを含んでいるすべての要素elm |
[サンプル]
pタグ内のフォントを12ptに設定し、h1のフォントサイズを24ptに設定、span.class名がlibの文字を20ptに設定する。
HTML
<h1>css selectors</h1> <h2>jQueryの練習</h2> <p>jQueryを楽しく学ぼう！</p> <p><span class="lib">jQuery</span>と<span class="lib">prototype.js</span> の両方をマスターしたい！</p>
JavaScript
$(function(){
$('p *').css("font-size", "12pt");
$('h1').css("font-size", "24pt");
$('span.lib').css("font-size", "20pt");
});
Loading ...
