What does the ">" (greater

 

For example: 

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

What exactly does the > sign mean?

> is the child combinator, sometimes mistakenly called the direct descendant combinator.1

That means the selector div > p.some_class only selects paragraphs of .some_class that are nested directly inside a div , and not any paragraphs that are nested further within.

An illustration: 

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

What's selected and what's not:

  • Selected
    This p.some_class is located directly inside the div , hence a parent-child relationship is established between both elements.

  • Not selected
    This p.some_class is contained by a blockquote within the div , rather than the div itself. Although this p.some_class is a descendant of the div , it's not a child; it's a grandchild.

    Consequently, while div > p.some_class won't match this element, div p.some_class will, using the descendant combinator instead.

    • 1 Many people go further to call it "direct child" or "immediate child", but that's completely unnecessary (and incredibly annoying to me), because a child element is immediate by definition anyway, so they mean the exact same thing. There's no such thing as an "indirect child".

    > (greater-than sign) is a CSS Combinator.

    A combinator is something that explains the relationship between the selectors.

    A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

    There are four different combinators in CSS3:

  • descendant selector (space)
  • child selector (>)
  • adjacent sibling selector (+)
  • general sibling selector (~)

    • Note: < is not valid in CSS selectors.

    For example: 

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

    Output:

    More information about CSS Combinators

    As others mention, it's a child selector. Here's the appropriate link.

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

    链接地址: http://www.djcxy.com/p/22850.html

    上一篇: Normalize.css和Reset CSS有什么区别？

    下一篇: 什么是“>”（更大