web-dev-qa-db-ja.com

CSSの '>'セレクタ。それは何ですか？

可能な重複：
CSSルールで「>」とはどういう意味ですか？

私はCSSコードで "より大きい"（>）が使われているのを数回見ましたが、それが何をするのかわかりません。それは何をするためのものか？

csscss-selectors
528
Bojangles

>は直接の子を選択します

たとえば、divのようにネストしているとします。

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

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

.outer > div {
    ...
}

これらのdivはクラス「outer」を持つ要素の直接の子孫（直接の子）であるため、あなたのルールは「middle」のクラスを持つdivにのみ適用されます（もちろん、これらのルールをオーバーライドする他のより具体的なルールを宣言しない限り） 。フィドルを参照してください。

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）とともに、利用可能なすべてのセレクタの完全なリストと、その使用例があります。

714
Spudley

>はすべての直接の子孫/子を選択します

スペースセレクタはすべての深い子孫を選択しますが、>より大きいセレクタはすべての直接の子孫のみを選択します。例えばフィドルを参照してください。

div { border: 1px solid black; margin-bottom: 10px; }
.a b { color: red; } /* every John is red */
.b > b { color: blue; } /* Only John 3 and John 4 are blue */
<div class="a">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>

<div class="b">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>
202
Adam Kiss

これはCSSの子セレクタです。例：

div > pは、divの直接の子であるすべての段落を選択します。

これ を参照

10
dheerosaur

他の人が言っているように、それは直接の子ですが、これはただスペースを残すこととは異なることに注意する価値があります...スペースはあらゆる子孫のためのものです。

<div>
  <span>Some text</span>
</div>

div>spanはこれに一致しますが、 ではなく に一致します。

<div>
  <p><span>Some text</span></p>
</div>

それに合わせるために、div>p>spanまたはdiv spanをすることができます。

8
Nathan MacInnes

それは親参照を宣言します、定義のためにこのページを見てください：

http://www.w3.org/TR/CSS2/selector.html#child-selectors

3
David Mårtensson

それは子セレクタです。

ある要素がある要素の子であるときに一致します。 「>」で区切られた2つ以上のセレクタで構成されています。

例：

次の規則は、BODYの子であるすべてのP要素のスタイルを設定します。

body > P { line-height: 1.3 }

例：

次の例では、子孫セレクタと子セレクタを組み合わせています。

div ol>li p

LIの子孫であるP要素と一致します。 LI要素はOL要素の子である必要があります。 OL要素はDIVの子孫でなければなりません。 ">"コンビネータの周りのオプションの空白が省かれていることに注意してください。

3
Margarez