css3セレクタ

TOPページに戻る > jquery入門

css3セレクタ

jqueryはcss3のセレクタを使えます
jqueryではcss3のセレクタの性質をjavascriptで再現しているので、css3のセレクタに対応していないブラウザでもcss3のセレクタを使えます

間接セレクタ

指定した要素の後に出現する要素
$("指定した要素 ~ 指定した要素の後に出現する要素を全て指定")
この場合は、hogeクラスの要素の後に出てくるp要素

$(function() {
	$(".hoge ~ p").処理する内容;
});

否定擬似セレクタ

指定した要素の中で条件を除く要素以外を指定します
$("指定した要素:not(条件を除く要素を指定)")
この場合は、p要素の中に出てくる最初の要素以外の要素を指定

$(function() {
	$("p:not(:first-child)").処理する内容;
});

emptyセレクタ

指定した要素に子要素やテキストを含まない場合に指定できます
$("要素:empty")
この場合は、子要素やテキストを含まないp要素を指定できます

$(function() {
	$("p:empty").処理する内容;
});

nth-child擬似クラス

指定した要素内の指定した番号の要素を指定します
$("要素:nth-child(番号)")
この場合は、5番目に出てくるp要素を指定しています

$(function() {
	$("p:nth-child(5)").処理する内容;
});

偶数や奇数、倍数でも指定できます

偶数の要素を指定

$(function() {
	$("p:nth-child(even)").処理する内容;
});

奇数の要素を指定

$(function() {
	$("p:nth-child(odd)").処理する内容;
});

倍数の要素を指定

この場合は、5の倍数にある要素

$(function() {
	$("p:nth-child(5n)").処理する内容;
});

last-child擬似クラス

指定した要素の最後の要素
$("要素:last-child")
この場合は、最後に出てくるp要素を指定します

$(function() {
	$("p:last-child").処理する内容;
});

only-child擬似クラス

指定した要素が1つだけ含まれる要素
2つ以上出てきた場合は指定できません
$("要素:only-child")
この場合は、p要素の子要素になっているspan要素が1つだけ含まれているp要素を指定します

$(function() {
	$("p span:only-child").処理する内容;
});