Search

jQuery APIリファレンスDOM要素：子フィルター

  1. :nth-child(index/even/odd/equation)〔親要素のn番目の子要素または親要素の偶数または奇数番目の子要素をすべて選択〕
  2. :first-child〔各親要素の最初の子要素をすべて選択〕
  3. :last-child〔各親要素の最後の子要素をすべて選択〕
  4. :only-child〔子要素が1つしかない親要素の子要素をすべて選択〕

:nth-child(index/even/odd/equation)
親要素のn番目の子要素または親要素の偶数または奇数番目の子要素をすべて選択

2009/2/27

戻り値：配列＜要素＞

親要素のn番目の子要素または親要素の偶数または奇数番目の子要素をすべて選択します。

:eq(position)は1つの要素にしかマッチしませんが、これは各親要素の指定したインデックス番号の子要素にマッチします。 インデックス番号は、0始まりの:eq()とは異なり1始まりです。

  • 第1引数indexには、マッチさせる各子要素のインデックス番号を数値・文字列（odd、even）・方程式のいずれかで指定します。 インデックス番号が偶数の要素をマッチさせたい場合は、nth-child(even)のように「even」（あるいは「2n」）を指定します。 インデックス番号が奇数の要素をマッチさせたい場合は、nth-child(odd)のように「odd」を指定します。 例えば3の倍数のインデックス番号を持つ要素とマッチさせたい場合は:nth-child(3n)のように指定します。

「:nth-child(index/even/odd/equation)」の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM要素：子フィルター：「:nth-child(index/even/odd/equation)」の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("ul li:nth-child(2)").append("<span> - 2nd!</span>");
                $("ol li:nth-child(3n)").append("<span> - 3n!</span>");
            });
        </script>
        <style type="text/css">
            .sample div { float:left; width:10em; }
            ul li span { color:red; }
            ol li span { color:blue; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM要素：子フィルター：「:nth-child(index/even/odd/equation)」の使用例 | jQuery</h1>
<!-- CODE -->
            <div class="sample cf">
                <p>▼各親要素の2番目の子要素を見つけます。</p>
                <div>
                    <ul>
                        <li>John</li>
                        <li>Karl</li>
                        <li>Brandon</li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li>Sam</li>
                    </ul>
                </div>
                <div>
                    <ul>
                        <li>Glen</li>
                        <li>Tane</li>
                        <li>Ralph</li>
                        <li>David</li>
                    </ul>
                </div>
            </div>
            <div class="sample cf">
                <p>▼各親要素の3の倍数の子要素を見つけます。</p>
                <div>
                    <ol>
                        <li>John</li>
                        <li>Karl</li>
                        <li>Brandon</li>
                    </ol>
                </div>
                <div>
                    <ol>
                        <li>Sam</li>
                    </ol>
                </div>
                <div>
                    <ol>
                        <li>John</li>
                        <li>Karl</li>
                        <li>Brandon</li>
                        <li>Sam</li>
                        <li>Glen</li>
                        <li>Tane</li>
                        <li>Ralph</li>
                        <li>David</li>
                        <li>Susan</li>
                    </ol>
                </div>
            </div>
<!-- CODE / -->
        </div>
    </body>
</html>

:first-child
各親要素の最初の子要素をすべて選択

2009/2/27

戻り値：配列＜要素＞

各親要素の最初の子要素をすべて選択します。

:firstは1つの要素にしかマッチしませんが、:first-childは各親要素の最初の子要素にマッチします。

「:first-child」の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM要素：子フィルター（Child Filters）：「:first-child」の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("div span:first-child")
                    .css("text-decoration", "underline")
                    .hover(function () {
                        $(this).addClass("sogreen");
                    }, function () {
                        $(this).removeClass("sogreen");
                    });
              });
        </script>
        <style type="text/css">
            span { color:blue; cursor:pointer; }
            span.sogreen { color:red;  }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM要素：子フィルター（Child Filters）：「:first-child」の使用例 | jQuery</h1>
            <p>▼各div要素の最初のspan要素に下線をつけ、マウスオーバー効果を追加します。</p>
<!-- CODE -->
            <div>
                <span>John,</span>
                <span>Karl,</span>
                <span>Brandon</span>
            </div>
            <div>
                <span>Glen,</span>
                <span>Tane,</span>
                <span>Ralph</span>
            </div>
<!-- CODE / -->
        </div>
    </body>
</html>

:last-child
各親要素の最後の子要素をすべて選択

2009/2/27

戻り値：配列＜要素＞

各親要素の最後の子要素をすべて選択します。

:lastは1つの要素にしかマッチしませんが、:last-childは各親要素の最後の子要素にマッチします。

「:last-child」の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM要素：子フィルター（Child Filters）：「:last-child」の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("div span:last-child")
                    .css("text-decoration", "underline")
                    .hover(function () {
                        $(this).addClass("sogreen");
                    }, function () {
                        $(this).removeClass("sogreen");
                    });
              });
        </script>
        <style type="text/css">
            span { color:blue; cursor:pointer; }
            span.sogreen { color:red;  }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM要素：子フィルター（Child Filters）：「:last-child」の使用例 | jQuery</h1>
            <p>▼各div要素の最後のspan要素に下線をつけ、マウスオーバー効果を追加します。</p>
<!-- CODE -->
            <div>
                <span>John,</span>
                <span>Karl,</span>
                <span>Brandon</span>
            </div>
            <div>
                <span>Glen,</span>
                <span>Tane,</span>
                <span>Ralph</span>
            </div>
<!-- CODE / -->
        </div>
    </body>
</html>

:only-child
子要素が1つしかない親要素の子要素をすべて選択

2009/2/27

戻り値：配列＜要素＞

子要素が1つしかない親要素の子要素をすべて選択します。
親要素が他の子要素を持っている場合は、マッチしません。

「:last-child」の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM要素：子フィルター（Child Filters）：「:last-child」の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("div button:only-child").text("Alone").css("border", "2px red solid");
              });
        </script>
        <style type="text/css">
            #sample div { width:4em; height:80px; margin:5px; padding:1em; float:left; background:pink; text-align:center; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM要素：子フィルター（Child Filters）：「:last-child」の使用例 | jQuery</h1>
            <p>▼button要素を1つだけ子要素として持つ兄弟要素のないdiv要素を見つけ、その子要素を装飾します。</p>
<!-- CODE -->
            <div id="sample" class="cf">
                <div>
                    <button>兄弟</button>
                    <button>兄弟</button>
                </div>
                <div>
                    <button>兄弟</button>
                </div>
                <div>
                    子要素なし
                </div>
                <div>  
                    <button>兄弟</button>
                    <button>兄弟</button>
                    <button>兄弟</button>
                </div>
                <div>
                    <button>兄弟</button>
                </div>
<!-- CODE / -->
        </div>
    </body>
</html>
「:only-child」の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM要素：子フィルター（Child Filters）：「:last-child」の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("div button:only-child").text("Alone").css("border", "2px red solid");
              });
        </script>
        <style type="text/css">
            #sample div { width:4em; height:80px; margin:5px; padding:1em; float:left; background:pink; text-align:center; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM要素：子フィルター（Child Filters）：「:last-child」の使用例 | jQuery</h1>
            <p>▼button要素を1つだけ子要素として持つ兄弟要素のないdiv要素を見つけ、その子要素を装飾します。</p>
<!-- CODE -->
            <div id="sample" class="cf">
                <div>
                    <button>兄弟</button>
                    <button>兄弟</button>
                </div>
                <div>
                    <button>兄弟</button>
                </div>
                <div>
                    子要素なし
                </div>
                <div>  
                    <button>兄弟</button>
                    <button>兄弟</button>
                    <button>兄弟</button>
                </div>
                <div>
                    <button>兄弟</button>
                </div>
<!-- CODE / -->
        </div>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか？

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手（1行メッセージも送れます♪）

TOP / ご利用上の注意点 / リンクについて / RSS

Valid: HTML検証, CSS検証, RSS検証

Thanks: Material Design 420 free icons

©2023 PHP & JavaScript Room All Rights Reserved.

pagetop

polarized women