子セレクター（CSSセレクター）

説明

このセレクターは、指定された要素の直接の子供であるすべての要素と一致します。子セレクターの組み合わせは、より大きいサイン（>）です。ホワイトスパースのキャラクターに囲まれている可能性がありますが、もしそうなら、WindowsのInternet Explorer 5はそれを誤って子孫セレクターとして扱います。したがって、ベストプラクティスは、このコンビネーターの周りに白人を避けることです。

このHTMLフラグメントを考えてみてください：

上記のフラグメントの要素を以下のセレクターと一致させてみましょう：

<ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Subitem 2A</li>
      <li>Subitem 2B</li>
    </ol>
  </li>
</ul>

上記の子セレクターは、UL要素の子供である2つのLI要素のみと一致します。親はol要素であるため、サブ項目と一致しません。

ul>li {
  ⋮ <span>declarations
</span>}

例

職場での子セレクターの例：

このセレクターは、UL要素の直接の子供であるすべてのLI要素、つまり親としてUL要素を持つすべてのLI要素と一致します。

CSS子セレクターに関するよくある質問（FAQ）

ul>li {
  ⋮ <span>declarations
</span>}

CSSの子セレクターと子孫セレクターの違いは何ですか？

CSSでは、子セレクターは特定の親要素の直接の子供のみをターゲットにします。子セレクターは「>」シンボルを使用し、子孫セレクターはスペースを使用します。たとえば、「div> p」はdivの直接の子供である段落のみを選択し、「div p」はネストレベルに関係なく、div内のすべての段落を選択します。たとえば、「div> p：first-child」は、divの直接の子である最初の段落のみを選択します。これは、要素の最初の子にのみスタイルを適用する場合に役立ちます。

子セレクターを使用して、属性に基づいて要素をターゲットにすることはできますか？たとえば、「div> input [type = ’text’]」は、divの直接の子供であるすべてのテキスト入力フィールドを選択します。

子セレクターはクラスおよびIDセレクターとどのように機能しますか？たとえば、「#mydiv> .myclass」は、ID「mydiv」を持つ要素の直接の子供であるクラス「myclass」のすべての要素を選択します。

子セレクターを使用して要素の最後の子のみをターゲットにできますか？

はい、「：：last-child」pseudoクラスを子セレクターと組み合わせて使用​​して、要素の最後の子のみをターゲットにすることができます。たとえば、「div> p：last-child」は、divの直接の子である最後の段落のみを選択します。

子セレクターはレスポンシブデザインでどのように機能しますか？これは、画面のサイズまたはデバイスの種類に基づいてレイアウトとスタイルを調整するのに役立ちます。

擬似要素で子セレクターを使用できますか？たとえば、「div> p :: before」は、divの直接の子供であるすべてのパラグラフの「::前」の擬似要素を選択します。子セレクターは、ルールの特異性を高めます。つまり、競合するルールがより低い特異性でオーバーライドします。たとえば、「div> p」には「p」よりも特異性が高くなります。

子セレクターを使用して奇数または子供のみをターゲットにできますか？たとえば、「div> p：nth-​​child（odd）」は、divの直接の子供であるすべての奇妙な数の段落を選択します。ただし、Internet Explorer 6以降のバージョンではサポートされていません。高度なCSSセレクターを使用するときは、常に現在のブラウザのサポートを確認してください。

以上が子セレクター（CSSセレクター）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。