web-dev-qa-db-ja.com

">"（大きな記号）CSSセレクターとはどういう意味ですか？

例えば：

div > p.some_class {
  /* Some declarations */
}

>記号は正確にはどういう意味ですか？

csscss-selectors
444
Misha Moroshko

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

つまり、セレクターdiv > p.some_classは、ネストされた.some_classの段落のみを選択します直接内部 a 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自体ではなく、div内のdivに含まれています。このp.some_classはdivの子孫ですが、子ではありません。それは孫です。

    したがって、div > p.some_classはこの要素に一致しませんが、div p.some_classは代わりに descendant combinator を使用します。

1多くの人はさらに「直接の子」または「即時の子」と呼びますが、子要素定義により即時であるため ）とにかく、まったく同じことを意味します。 「間接的な子」のようなものはありません。

637
BoltClock

>（大なり記号）はCSS Combinatorです。

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

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

CSS3には4つの異なる組み合わせがあります。

  1. 子孫セレクター（スペース）
  2. 子セレクタ（>）
  3. 隣接兄弟セレクタ（+）
  4. 一般兄弟セレクター（〜）

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

enter image description here

次に例を示します。

<!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>

出力：

enter image description here

CSSコンビネータに関するより詳しい情報

30
Premraj

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

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

11
Dagg Nabbit

pの直下に直接あるクラスsome_classを持つdiv要素と一致します。

7
dan04

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

2
tschaible
<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>

div > p.some_class{
    color:red;
}

<p>が.some_classであるすべての直接の子は、それらに適用されるスタイルを取得します。

1
suraj rawat

（子セレクタ）は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セレクターとその使用方法の詳細については、私のブログ、 cssセレクター および css3セレクター を確認してください。

0
Avinash Malhotra