「>」(大なり記号)CSSセレクターの意味


回答:


673

>コンビネータです。誤って直接子孫コンビネータと呼ばれることもあります。1

つまり、セレクタは、内に直接ネストされているdiv > p.some_class段落のみを選択し、さらに.some_classネストされている段落は選択しません。div

イラスト:

<div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">More text here</p> <!-- Not selected [2] -->
    </blockquote>
</div>

何を選択し、何を選択しないか:

  1. 選択済み
    これp.some_classはの内部に直接配置されているdivため、両方の要素間に親子関係が確立されます。

  2. 選択されていません
    これp.some_classは、それ自体ではなく、blockquote内に含まれています。これはの子孫ですが、子供ではありません。それは孫です。divdivp.some_classdiv

    その結果、div > p.some_classこの要素にdiv p.some_classは一致しませんが、代わりに子孫コンビネーターを使用します。


1 多くの人々はそれを「直接の子」または「直接の子」と呼んでいます、子要素定義により即時であるため、まったく同じことです。「間接的な子」のようなものはありません。


2
+1それは本当に子セレクターと呼ばれていますか?もしそうなら、それはかなり誤解を招くものです。私は#something a子供セレクターになると思います。
アレックス

2
@alex:はい :) は、孫またはgreat ^ n孫である#something aことを意味します(ネストの深さは考慮されていません)。a#something
BoltClock

12
@alex 子コンビネータと呼ばれ、スペースは子孫コンビネータ
robertc

33
誰かが祖父母の子供であるとき、私たちは近親相姦の本当に厄介な例を扱っています。幸い、それはHTMLでは不可能です。
クエンティン

8
わかりやすくするために、一般の人が子供を直接の子供と呼ぶことはありません。
BoltClock

41

> (より大きい記号)はCSS Combinatorです。

コンビネータは、セレクタ間の関係を説明するものです。

CSSセレクターには、複数の単純なセレクターを含めることができます。単純なセレクターの間に、コンビネーターを含めることができます。

CSS3には4つの異なるコンビネーターがあります。

  1. 子孫セレクター(スペース)
  2. 子セレクター(>)
  3. 隣接する兄弟セレクター(+)
  4. 一般的な兄弟セレクター(〜)

注: < CSSセレクターでは無効です。

ここに画像の説明を入力してください

例えば:

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

出力:

ここに画像の説明を入力してください

CSS Combinatorsに関する詳細情報



@premraj親子CSSセレクターの優れた説明をありがとうございます!
YCode、

あなたはそれ.entry-content > * {"code" }が続くようなものを得たときそれはどういう意味.entry-content {"other code" }ですか?の.entry-content > *すべての子をカバーしていませんentry-contentか?
-YCode、

14

他の人が言うように、それは子セレクターです。ここに適切なリンクがあります。

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


リンクありがとうございます!そこで「隣接兄弟セレクター」も発見。
Misha Moroshko、2010

あなたは見つけることができますブラウザのサポート Sitepoint上を。プロジェクトにとって重要な場合、IE6では機能しません。他の場所でも問題ありません。このリソースは特にです。兄弟、:nth-​​child()などのサポートがまだ不完全な場合に便利です
FelipeAls

10

これは、一致するpクラスを持つ要素some_classです直接、Aの下にdiv


5

pタグのsome_class直接の子であるクラスを持つすべてのタグdiv


4
html
<div>
    <p class="some_class">lohrem text (it will be of red color )</p>    
    <div>
        <p class="some_class">lohrem text (it will  NOT be of red color)</p> 
    </div>
    <p class="some_class">lohrem text (it will be  of red color )</p>
</div>
CSS
div > p.some_class{
    color:red;
}

<p>一緒にいる直接の子はすべて、.some_classスタイルが適用されます。


3

(子セレクター)はcss2で導入されました。div p {}は、div要素の子孫であるすべてのp要素を選択しますが、div> pは、子p要素のみを選択し、孫、偉大な孫などは選択しません。

<style>
  div p{  color:red  }       /* match both p*/
  div > p{  color:blue  }    /* match only first p*/

</style>

<div>
   <p>para tag, child and decedent of p.</p>
   <ul>
       <li>
            <p>para inside list. </p>
       </li>
   </ul>
</div>

CSS Ce [lectorsとその使用法の詳細については、私のブログ、cssセレクターcss3セレクターを確認してください


0

CSSのより大きい記号(>)セレクターは、右側のセレクターが左側にあるものの直接の子孫/子であることを意味します。

例:

article > p { }

記事の後に続く段落にのみスタイルを付けることを意味します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.