☰

CSS '>' セレクターとは何ですか? [重複] 質問する

tag-icon • tag-icon css css-selectors
CSS '>' セレクターとは何ですか? [重複] 質問する

CSS コードで「より大きい」( >) が使用されているのを何度か見たことがありますが、それが何をするのかわかりません。これは何をするのでしょうか?

ベストアンサー1

>直系の子供を選択する

たとえば、次のようにネストされた div がある場合:

<div class='outer'>
    <div class="middle">
        <div class="inner">...</div>
    </div>
    <div class="middle">
        <div class="inner">...</div>
    </div>
</div>

スタイルシートで次のように CSS ルールを宣言します。

.outer > div {
    ...
}

あなたのルールは、クラスが「middle」の div にのみ適用されます。なぜなら、それらの div はクラスが「outer」の要素の直接の子孫 (直下の子) だからです (もちろん、これらのルールを上書きする他のより具体的なルールを宣言しない限り)。fiddle を参照してください。

div {
  border: 1px solid black;
  padding: 10px;
}
.outer > div {
  border: 1px solid orange;
}
<div class='outer'>
  div.outer - This is the parent.
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
</div>

<p>Without Words</p>

<div class='outer'>
  <div class="middle">
    <div class="inner">...</div>
  </div>
  <div class="middle">
    <div class="inner">...</div>
  </div>
</div>

サイドノート

セレクターの間に の代わりにスペースを入れた場合>、ルールはネストされた div の両方に適用されます。スペースはより一般的に使用され、「子孫セレクター」を定義します。つまり、 のように直接の子だけでなく、ツリーの下にある一致する要素を検索します>。

注意:>セレクターは IE6 ではサポートされていません。ただし、IE7 や IE8 を含む他のすべての現在のブラウザーでは動作します。

あまり使用されていない CSS セレクターを調べている場合は、、、セレクター+も調べると便利です。これらはすべて非常に便利です。~[attr]

このページ利用可能なセレクターの完全なリストと、さまざまなブラウザーでのサポートの詳細 (主に IE で問題があります)、およびその使用例が記載されています。

おすすめ記事