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

Follow me!