jQuery <その他リファレンス メモ> 言語 等 CSSHTML JavaScriptPython ライブラリ・プラットフォーム jQuerymicro:bit Xamarin ドキュメンテーション DoxygenJSDoc MarkdownSHFB XML ドキュメント コメント その他 各種資料 子サイト 簡易リファレンス・Tips サポート寄付 セレクタ (Selectors) 階層フィルタ 階層フィルタメモ親子・兄弟等の階層により要素を選択 子要素:指定した親子関係となる、子要素を選択 子孫要素:指定した先祖・子孫関係となる、子孫要素を選択 隣接兄弟要素:同じ親を持ち指定した兄弟関係となる、兄要素の直後の弟要素を選択 一般兄弟要素:同じ親を持ち指定した兄弟関係となる、兄要素より後の弟要素を選択 構文 【子要素】 jQuery( "parent【親要素セレクタ】 > child【子要素セレクタ】" ) 1.0 【子孫要素】 jQuery( "ancestor【先祖要素セレクタ】descendant【子孫要素セレクタ】" ) 1.0 【隣接兄弟要素】 jQuery( "prev【兄要素セレクタ】 + next【弟要素セレクタ】" ) 1.0 【一般兄弟要素】 jQuery( "prev【兄要素セレクタ】 ~ siblings【弟要素セレクタ】" ) 1.0 関連jQuery リファレンス メモ セレクタ一覧 CSS リファレンス メモ E F【子孫 結合子】 E > F【子 結合子】 E + F【隣接兄弟 結合子】 E ~ F【一般兄弟 結合子】 jQuery (英語) Child Selector (“parent > child") Descendant Selector (“ancestor descendant") Next Adjacent Selector (“prev + next") Next Siblings Selector (“prev ~ siblings") 例 【子要素】 <style> #id1 li { color: black; } </style> <ol id="id1" style="color:black;"> <li>子要素 <li>子要素 <li>子要素 <ol> <li>孫要素 <li>孫要素 </ol> <li>子要素 <li>子要素 </ol> <script> $( "#id1 > li" ).css( { color:"red", border:"2px red dashed" } ); </script> 子要素 子要素 子要素 孫要素 孫要素 子要素 子要素 【子孫要素】 <style> #id2 li { color: black; } </style> <ol id="id2"> <li>子要素 <li>子要素 <li>子要素 <ol> <li>孫要素 <li>孫要素 </ol> <li>子要素 <li>子要素 </ol> <script> $( "#id2 li" ).css( { color:"red", border:"2px red dashed" } ); </script> 子要素 子要素 子要素 孫要素 孫要素 子要素 子要素 【隣接兄弟要素】 <style> #id3 li { color: black; } </style> <ol id="id3"> <li>項目 <li id="id31">兄要素 (基準) <li>弟要素 <ol> <li>項目 <li>項目 </ol> <li>弟要素 <li>弟要素 </ol> <script> $( "#id31 + li" ).css( { color:"red", border:"2px red dashed" } ); </script> 項目 兄要素 (基準) 弟要素 項目 項目 弟要素 弟要素 【一般兄弟要素】 <style> #id4 li { color: black; } </style> <ol id="id4"> <li>項目 <li id="id41">兄要素 (基準) <li>弟要素 <ol> <li>項目 <li>項目 </ol> <li>弟要素 <li>弟要素 </ol> <script> $( "#id41 ~ li" ).css( { color:"red", border:"2px red dashed" } ); </script> 項目 兄要素 (基準) 弟要素 項目 項目 弟要素 弟要素