【jQuery】要素セレクタについて・その2

■ first-child擬似クラス

特定のセレクターのうちの最初に登場する要素のみに指定することができるセレクターです。
セレクターの後ろに:first-childと書いて指定します。
親要素が異なる場合もそれぞれ最初に出てくる要素が指定されます。

$(function(){
	$("li:first-child").css("color","#F00");
});

See the Pen ogOxyX by Info Markup (@Info_Markup) on CodePen.

■ 否定擬似クラス

セレクター内で特定の条件以外のものを指定できるのが「否定擬似クラス」です。
セレクターの後ろに :not(...) を付け、除外する条件を (...) 内に記述する感じです。

$(function(){
	$("li:not(:first-child)").css("color","#F00");
});

See the Pen YPMWvY by Info Markup (@Info_Markup) on CodePen.

「～じゃないヤツ」という指定はCSSではあまり使ったことありませんが。
※上記の場合「liタグのfirst-childじゃないやつ」ということになりますな。

■ empty擬似クラス

子要素やテキストを含まない要素を指定できるのが「empty擬似クラス」でっす。
セレクターの後ろに :empty と記述します。

$(function(){
	$("li:empty").css("display","none");
});

See the Pen JoVKmN by Info Markup (@Info_Markup) on CodePen.

中身がないタグに関して指定することができるので、例えば上記のように「からっぽのliタグは表示させない」なんていう用途がありますね。
※CSSで非表示にしているだけなので、HTMLタグとしては存在することになりますが。

■ nth-child擬似クラス

特定のセレクターから指定した番号の要素だけを指定できるのが「nth-child擬似クラス」です。
セレクターの後ろに :nth-child（番号） と記述します。

$(function(){
	$("li:nth-child(2)").css("color","#F00");
});

See the Pen XJQKoj by Info Markup (@Info_Markup) on CodePen.

これはなんとなくCSSの世界でも浸透している感じですかね。

nth-child擬似クラスは、$("li:nth-child(even)") で偶数番目のli要素を、
$("li:nth-child(odd)") で奇数番目のli要素を指定できます。
また、$("li:nth-child(3n)") と記述することで、3の倍数番目の要素を指定できちゃいます。

■ last-child擬似クラス

特定のセレクターの中で最後の要素だけを指定できるのが「last-child擬似クラス」でっす。セレクターの後ろに :last-child と記述します。

$(function(){
	$("li:last-child").css("color","#F00");
});

See the Pen pvBbYv by Info Markup (@Info_Markup) on CodePen.

■ only-child擬似クラス

セレクターの中に特定の要素が1つだけ含まれる場合、その要素を指定できます。

$(function(){
	$("li span:only-child").css("color","#F00");
});

See the Pen KwYMYK by Info Markup (@Info_Markup) on CodePen.

考え方が難しいですが、上記の場合「liタグの中にひとつしか入ってないspanを赤にする」てな感じですかね。

■ CSSの属性セレクター

属性セレクターは、要素の持つ属性の条件で絞り込めるセレクターです。

$(function(){
	$("li[id]").css("color","#F00");
});

See the Pen RNORmB by Info Markup (@Info_Markup) on CodePen.

■ 指定の仕方は続くよどこまでも

はい。こんな感じでjQueryの「○○を■■する」の「○○を」の指定の仕方がどんどん出てきます。
このままの勢いで「■■する」にたどり着くにはあと12年ぐらい必要（笑）ですが、始めたからにはこんな感じで進めていこうと思います。
覚えても覚えなくてもいいとは思いますが、とりあえずテキストとしてjQueryの記述をパタパタ打って手に慣れさせるというのが私の勉強方法でした。
次回へ続く…