jQuery用 セレクタ

一覧

CSSで使用可能なセレクタについては「CSS セレクタ」参照

セレクタ名	書式	機能	例
firstセレクタ	$("要素:first")	指定した要素の最初の要素	$("li:first").css("color","red");
lastセレクタ	$("要素:last")	指定した要素の最後の要素	$("li:last").css("color","red");
evenセレクタ	$("要素:even")	指定した要素の偶数番目の要素 (0から数える)	$("li:even").css("color","red");
oddセレクタ	$("要素:odd")	指定した要素の奇数番目の要素 (0から数える)	$("li:odd").css("color","red");
eqセレクタ(n)	$("要素:eq(n)")	指定番目の要素 (0から数える)	$("li:eq(2)").css("color","red");
ltセレクタ(n)	$("要素:lt(n)")	指定番目より前の要素 (0から数える)	$("li:lt(2)").css("color","red");
gtセレクタ	$("要素:gt(n)")	>指定番目より後の要素 (0から数える)	$("li:gt(2)").css("color","red");
containsセレクタ	$("要素:contains("文字列")")	指定の文字列を含む要素	$("li:contain('テスト')").css("color","red");
hasセレクタ	$("要素:has(要素)")	指定の要素を含む要素	$("li:has(div)").css("color","red");
parentセレクタ	$("要素:parent")	子要素、テキストを含む要素	$("li:parent").css("color","red");
headerセレクタ	$("要素:header")	h1~h6見出し要素	$("li:header").css("color","red");

汎用

:first

最初の要素

• aaa
• bbb
• ccc
• ddd

<section id="first">
　<h5>first</h5>
　<ul>
　　<li>aaa</li>
　　<li>bbb</li>
　　<li>ccc</li>
　　<li>ddd</li>
　</ul>
</section>

<script>
　$(function(){
　　$("#first li:first").css("color", "red");
　});
</script>

:last

最後の要素

• aaa
• bbb
• ccc
• ddd

<section id="last">
　<h5>last</h5>
　<ul>
　　<li>aaa</li>
　　<li>bbb</li>
　　<li>ccc</li>
　　<li>ddd</li>
　</ul>
</section>

<script>
　$(function(){
　　$("#last li:last").css("color", "red");
　});
</script>

:even

偶数番目の要素

• aaa
• bbb
• ccc
• ddd

<section id="even">
　<h5>even</h5>
　<ul>
　　<li>aaa</li>
　　<li>bbb</li>
　　<li>ccc</li>
　　<li>ddd</li>
　</ul>
</section>

<script>
　$(function(){
　　$("#even li:even").css("color", "red");
　});
</script>

:odd

奇数番目の要素

• aaa
• bbb
• ccc
• ddd

<section id="odd">
　<h5>odd</h5>
　<ul>
　　<li>aaa</li>
　　<li>bbb</li>
　　<li>ccc</li>
　　<li>ddd</li>
　</ul>
</section>

<script>
　$(function(){
　　$("#odd li:odd").css("color", "red");
　});
</script>

:eq(n)

n番目の要素

• aaa
• bbb
• ccc
• ddd

<section id="eq">
　<h5>eq</h5>
　<ul>
　　<li>aaa</li>
　　<li>bbb</li>
　　<li>ccc</li>
　　<li>ddd</li>
　</ul>
</section>

<script>
　$(function(){
　　$("#eq li:eq(2)").css("color", "red");
　});
</script>

:lt(n)

n番目より前の要素(nは含まない)

• aaa
• bbb
• ccc
• ddd

<section id="lt">
　<h5>lt</h5>
　<ul>
　　<li>aaa</li>
　　<li>bbb</li>
　　<li>ccc</li>
　　<li>ddd</li>
　</ul>
</section>

<script>
　$(function(){
　　$("#lt li:lt(2)").css("color", "red");
　});
</script>

:gt(n)

n番目より後の要素(nは含まない)

• aaa
• bbb
• ccc
• ddd

<section id="gt">
　<h5>gt</h5>
　<ul>
　　<li><span>aaa</span></li>
　　<li>bbb</li>
　　<li>ccc</li>
　　<li>ddd</li>
　</ul>
</section>

<script>
　$(function(){
　　$("#gt li:gt(1)").css("color", "red");
　});
</script>

:contains(～)

指定の文字列を含む要素

• aaa
• bbb
• ccc
• ddd

<section id="contains">
　<h5>contains</h5>
　<ul>
　　<li>aaa</li>
　　<li>bbb</li>
　　<li>ccc</li>
　　<li>ddd</li>
　</ul>
</section>

<script>
　$(function(){
　　$("#contains li:contains(‘bbb’)").css("color", "red");
　});
</script>

:has(～)

～の要素を含む

• aaa
• bbb
• ccc
• ddd

<section id="has">
　<h5>has</h5>
　<ul>
　　<li><span>aaa</span></li>
　　<li>bbb</li>
　　<li>ccc</li>
　　<li>ddd</li>
　</ul>
</section>

<script>
　$(function(){
　　$("#has li:has(span)").css("color", "red");
　});
</script>

:parent

小要素を持つ（自身が親）

• aaa
• bbb
• ccc
• ddd

<section id="parent">
　<h5>parent</h5>
　<ul>
　　<li>aaa</li>
　　<li>bbb</li>
　　<li>ccc</li>
　　<li>ddd</li>
　</ul>
</section>

<script>
　$(function(){
　　$("#parent li:parent").css("color", "red");
　});
</script>

:children

小要素

:header

h1~h6見出し要素

• aaa
• bbb
• ccc
• ddd

<section id="header">
　<h5>header</h5>
　<ul>
　　<li>aaa</li>
　　<li>bbb</li>
　　<li>ccc</li>
　　<li>ddd</li>
　</ul>
</section>

<script>
　$(function(){
　　$("#header :header").css("color", "red");
　});
</script>

:only-child

唯一の子要素
var onlychild = $("span:only-child").text();
//⇒onlychild : div6-1