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