セレクターについて ※【jQuery】

◆セレクターについて
書き方は、ほぼCSSと同じ。

○今現在よく使っているCSS
○jQueryだと使えるCSS(※)
○jQuery特有のもの

※ブラウザでサポートされていないCSSも使用可能


下記、詳細↓↓↓


○今現在でもよく使っているCSS
《例》
＄（function(){
$(”ｐ”).ｃｓｓ（”color”,”red”）
}）;

命令：＜ｐ＞を赤くしてね

IDやClassなどもCSSと同じようにかくことができる。

$(” li ”).ｃｓｓ※以下略→→『＜li＞』が赤に
$(” #main”).ｃｓｓ※以下略→→『＜id=”main”＞』が赤に
$(” .navi ”).ｃｓｓ※以下略→→『＜class=”navi”＞』が赤に
$(” li#main ”).ｃｓｓ※以下略→→『＜liのid=”main”＞』が赤に
$(” #main span ”).ｃｓｓ※以下略→→『＜id=”main”＞の中の＜span＞』が赤に
$(”#main, .navi ”).ｃｓｓ※以下略→→『＜id=”main”＞と＜class=”navi”＞』が赤に
$(”* ”).ｃｓｓ※以下略→→『全ての要素』が赤に※ユニバーサルセレクター



○jQueryだと使えるCSS
★子セレクター
$(” li > strong ”).ｃｓｓ※以下略
→＜li＞の直下にある＜strong＞が赤に
【例】
1.＜li＞＜strong＞テキスト＜/strong＞＜/li＞
2.＜li＞＜div＞＜strong＞テキスト＜/strong＞＜/div＞＜/li＞
※2.は＜div＞に入っているのできかない。


★隣接セレクター
$(” #top + li”).ｃｓｓ※以下略
＜id＝”top”＞の次にでてくる＜li＞
【例】
1.＜li id＝”top”＞テキスト＜/li＞
2.＜li＞テキスト＜/li＞
3.＜li id＝”top”＞テキスト＜/li＞


★間接セレクター　~(読み：チルダ)
$(” #top ~ li”).ｃｓｓ※以下略
＜id＝”top”＞の後にでてくる＜li＞
【例】
1.＜li id＝”top”＞テキスト＜/li＞
2.＜li＞テキスト＜/li＞
3.＜li id＝”top”＞テキスト＜/li＞
※半角英数の方(~)


★否定疑似クラス
条件以外の要素　：not（ここに条件）
$(”li:not(#top)”).ｃｓｓ※以下略
#top以外のものに…

★first-child疑似クラス
最初にでてくる要素
$(”li：first-child”).ｃｓｓ※以下略
リストの中の一番最初だけが…

★nth:child疑似クラス　：nth:child（ここに番号）※1
任意の番号だけの要素
$(”li：nth:child（2）”).ｃｓｓ※以下略
リストの2番目だけに…

★last-child疑似クラス
最後にでてくる要素
$(”li：last-child”).ｃｓｓ※以下略
リストの一番最後に…

★only-child疑似クラス　
要素が一つだけある要素※2
$(”li　span：only-child”).ｃｓｓ※以下略
リストの中にspanが1つだけあると…


※1 nthの読み不明、N番目とかの意味らしい。
※2 要素が2つあるときは何も起こらない

jQuery　-はじめに-
その他(属性セレクター)→
その他(jQuery独自のフィルター)→