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
１週間でできる会員サイト「Limited」
必要最小限。だから分かりやすい。始めやすい。続けやすい。
限定① 安⼼・安全の会員制
限定② 必要最⼩限の機能
限定③ 独⾃機能を追加可能