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

小要素

<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