疑似クラスとカスタムセレクター
`:has()`、`:not()`、`:nth-child()`などの組み込み疑似クラスを理解し、再利用可能な要素フィルタリングのために独自のカスタムセレクターを作成します。
「疑似クラスとカスタムセレクター」はCoddyKit上の無料jQuery Academyレッスンです。 これはレッスン2/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全3レッスンが含まれています。
疑似クラスでさらにパワーアップ
高度なセレクターへようこそ。ここでは、選択した要素の特別な状態を定義するためにセレクターへ追加する特別なキーワード、疑似クラスについて学びます。
- 標準的なHTML属性や名前では簡単に選択できない要素を対象にできます。
- 選択結果を動的に絞り込むフィルターのようなものだと考えてください。
疑似クラスはコロン（:）で始まり、:hoverや:first-childのように記述します。
位置で対象を指定する: :nth-child()
:nth-child()疑似クラスは、兄弟要素のグループ内での位置に基づいて要素を選択します。リストや表の行のスタイル設定に非常に便利です。
:nth-child(n): n番目の子要素を選択します。:nth-child(odd): 奇数番目の子要素を選択します。:nth-child(even): 偶数番目の子要素を選択します。
数え始めるのは1番目の子要素からです。
:nth-child(odd/even)でスタイルを設定する
:nth-child(odd)と:nth-child(even)を使うと、リストにゼブラストライプを適用するように、交互のスタイルをすばやく設定できます。
次の例を実行して、効果を確認してみましょう。
$(document).ready(function() {
// Selects odd list items and makes their text blue
$('li:nth-child(odd)').css('color', 'blue');
// Selects even list items and makes their text green
$('li:nth-child(even)').css('color', 'green');
});
// HTML Structure (imagine this is in your page):
// <ul>
// <li>Item 1</li>
// <li>Item 2</li>
// <li>Item 3</li>
// <li>Item 4</li>
// </ul>高度な :nth-child() の式
:nth-child()の中では、An+Bのような、より複雑な式を使用できます。ここで、Aは周期の大きさ、Bはオフセットを表します。
:nth-child(3n): 3番目ごとの子要素（3番目、6番目、9番目…）を選択します。:nth-child(3n+1): 1番目、4番目、7番目…の子要素を選択します。
これにより、間隔に基づいて非常に正確に要素を選択できます。
:not()で要素を除外する
:not()疑似クラスを使うと、特定の要素を選択対象から除外できます。「クラスintroを持つものを除いて、すべての段落を選択する」という意味です。
- 引数として別のセレクターを受け取ります:
:not(selector)。 - 複雑な新しいセレクターを書かずに、既存の選択結果を絞り込める便利な機能です。
実践で :not() を使う
最初のリスト項目だけを除き、すべてのリスト項目に枠線を追加したいとします。この場合は:not(:first-child)が最適です。
:not()を使って最初の項目を除外する方法を確認しましょう。
$(document).ready(function() {
// Selects all list items that are NOT the first child
$('li:not(:first-child)').css('border-top', '1px solid gray');
});
// HTML Structure:
// <ul>
// <li>First Item</li>
// <li>Second Item</li>
// <li>Third Item</li>
// </ul>:has()で親要素を選択する
:has()疑似クラスは独特な機能を持っています。引数として渡したセレクターに一致する要素を少なくとも1つ含む場合に、その要素を選択します。
- これは「内部に
<p>タグを持つすべての<div>を指定してください」と尋ねるようなものです。 - 子要素の特徴に基づいて親要素を選択できます。
:has()で強調表示する
画像を含む<div>コンテナだけを強調表示したいとします。:has('img')を使えば効率的に実現できます。
次のコードを実行して、どのdivに枠線が付くか確認しましょう。
$(document).ready(function() {
// Selects divs that contain an image and adds a border
$('div:has(img)').css('border', '2px solid red');
});
// HTML Structure:
// <div id="container1">
// <p>Text only</p>
// </div>
// <div id="container2">
// <img src="example.png" alt="An image">
// <p>Text and image</p>
// </div>カスタムセレクター: jQueryを拡張する
jQueryに組み込みのセレクターだけでは足りない場合はどうすればよいでしょうか。独自のカスタム疑似セレクターを作成できます。これにより、非常に具体的な独自のロジックに基づいて要素を絞り込めます。
jQuery.expr[':']を使って登録します。- 選択処理をより簡潔に書けるうえ、再利用もできます。
独自性の高い絞り込みが必要な場合に役立つ高度な機能です。
カスタム :contains-word() を作成する
部分文字列ではなく、特定の単語全体を含む要素を見つけるカスタムセレクター:contains-word()を作成してみましょう。
この例では:contains-word()を定義してから使用しています。
$(document).ready(function() {
// Define a custom pseudo-selector ':contains-word'
$.expr[':']['contains-word'] = $.expr.createPseudo(function(word) {
var pattern = new RegExp('\b' + word + '\b', 'i');
return function(elem) {
return pattern.test($(elem).text());
};
});
// Use the custom selector to find paragraphs containing 'hello'
$('p:contains-word("hello")').css('background-color', 'yellow');
});
// HTML Structure:
// <p>Say hello world!</p>
// <p>Another paragraph.</p>
// <p>Hello there!</p>疑似クラスチャレンジ
次のHTMLについて考えてみましょう。
<ul>
<li class="special">One</li>
<li>Two</li>
<li class="special">Three</li>
<li>Four</li>
<li class="special">Five</li>
</ul>'Two'と'Four' だけを対象にするjQueryセレクターはどれでしょうか。
まとめ: 疑似クラスとカスタムセレクター
強力なjQueryの選択テクニックを習得しました。
- 疑似クラス（
:nth-child()、:not()、:has()など）を使うと、要素の状態や他の要素との関係に基づいて要素を選択できます。 :nth-child()は、式も使って位置に基づく要素を対象にします。:not()は要素を選択対象から除外します。:has()は子要素に基づいて親要素を選択します。jQuery.expr[':']を使って独自のカスタム疑似セレクターを作成し、非常に具体的な絞り込みを行うこともできます。
これらを練習して、DOMの対象指定をさらに洗練させましょう。
AI チューターと学ぶ JavaScript — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 22
- レッスン
- 48
よくある質問
「疑似クラスとカスタムセレクター」レッスンは無料ですか？
はい。「疑似クラスとカスタムセレクター」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全3レッスンが含まれています。
「疑似クラスとカスタムセレクター」で何を学びますか？
`:has()`、`:not()`、`:nth-child()`などの組み込み疑似クラスを理解し、再利用可能な要素フィルタリングのために独自のカスタムセレクターを作成します。 ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
jQuery Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/3です。
「疑似クラスとカスタムセレクター」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このjQuery Academyレッスンでコードを書いて実行できますか？
はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 高度な属性セレクター
- 疑似クラスとカスタムセレクター
- 効率的なDOMトラバーサル技法