What does the “>” (greater-than sign) CSS selector mean?

2024-02-03 16:53:52

What does the “>” (greater-than sign) CSS selector mean?

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

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.some_class { 
    background: yellow;
}

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

Expand snippet

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.

¹_{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".}

回答2

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

CSS '>' selector; what is it? [duplicate]

I've seen the "greater than" (>) used in CSS code a few times, but I can't work out what it does. What does it do?

回答1

`>` selects immediate children

For example, if you have nested divs like such:

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

and you declare a css rule in your stylesheet like such:

.outer > div {
    ...
}

your rules will apply only to those divs that have a class of "middle" since those divs are direct descendants (immediate children) of elements with class "outer" (unless, of course, you declare other, more specific rules overriding these rules). See 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>

`>` selects all direct descendants/children

A space selector will select all deep descendants whereas a greater than > selector will only select all immediate descendants. See fiddle for example.

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>

码农公寓

What does the “>” (greater-than sign) CSS selector mean?

CSS '>' selector; what is it? [duplicate]

> selects immediate children

> selects all direct descendants/children

相关文章

`>` selects immediate children

`>` selects all direct descendants/children