CSS > combinator not getting result I expected

Question

Im having a bit of trouble understanding how > works in CSS, I thought what ever element we are targeting, the children of that element would pass on the property. I was wondering if there is an exception to that rule?

<ul id = "outside"> 

          <li>A</li>
          <li>B</li>
          <li>C</li> 
            <ul>
              <li>D</li>
              <li>E</li>
              <li>F</li>
            </ul>
          <li>G</li>

</ul>

#outside > li{
  color: green;
}

A B C are green but D E F are not

<div id="three">
          three
          <div id="two">
            two
           <header id="one">
             one
             <footer id="zero">
              zero
             </footer>
           </header>
          </div>
        </div>

#three > #two {
  color: green;
}

two, one, zero are green but not three

Your first code is invalid to start with, only li are allowed as child of ul — Temani Afif, Dec 16 '19 at 20:34
`>` is the child selector. That means, it literally selects only the children. — Heretic Monkey, Dec 16 '19 at 20:35
Does this answer your question? [What does the ">" (greater-than sign) CSS selector mean?](https://stackoverflow.com/questions/3225891/what-does-the-greater-than-sign-css-selector-mean) — Heretic Monkey, Dec 16 '19 at 20:38

symlink · Accepted Answer · 2019-12-16T20:52:25.710

1

The > operator only selects the direct (first gen) children of the element. In the case of color, the child elements of that targeted element inherit that style rule:

A B C are green but D E F are not

Because the li tags D,E, and F are not descendants of the li tags targeted in the rule:

#outside>li {
  color: green;
}

<ul id="outside">

  <li>A</li>
  <li>B</li>
  <li>C</li>
  <ul>
    <li>D</li>
    <li>E</li>
    <li>F</li>
  </ul>
  <li>G</li>

</ul>

two, one, zero are green but not three

#three is neither targeted nor inherited. Two is directly targeted by this rule, and #one and #zero are inheriting #two's rule:

#three>#two {
  color: green;
}

<div id="three">
  three
  <div id="two">
    two
    <header id="one">
      one
      <footer id="zero">
        zero
      </footer>
    </header>
  </div>
</div>

edited Dec 16 '19 at 20:52

answered Dec 16 '19 at 20:45

symlink

11,984
7
29
50

1

You helped clear up some ambiguity I had, I wasent aware that we were able to inherit to the children, I thought we would only be able to apply our changes to the selector we targeted. I played with the code and added an unordered list inside a
and the new unordered list items were green.

ghost2092000

Dec 16 '19 at 21:15

@ghost2092000 Technically you were right before that you can only apply changes to the selector you targeted. When a child element is affected by a style rule (e.g. `color: green`) it's because it has *inherited* that rule, not because the rule has been applied to it. Seems like a trivial distinction, I know, but it's important to keep in mind. – symlink Dec 16 '19 at 21:22

Obsidian Age · Answer 2 · 2019-12-16T20:43:25.577

> is the direct child combinator; it only applies to child elements, not grandchild or further descendants.

Each of your two examples has a different reason for not having the rule applied. The top example targets #outside > li. This means that only <li> elements that are a direct child of #outside will have the rule applied to them. This does cascade down to other <li> descendants, however, it's not applying due to the fact that the upper example has incorrect markup; only <li> is allowed as a child of <ul>. If you were to correct this markup, it would cascade as expected:

#outside>li {
  color: green;
}

<ul id="outside">

  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>
    <ul>
      <li>D</li>
      <li>E</li>
      <li>F</li>
    </ul>
  </li>
  <li>G</li>

</ul>

As for your second example, the selector is #three > #two. This only applies to #two, due to the fact that the #three > part of the selector merely adds specificity. In any given CSS selector, it's only the final element in the 'chain' that has the rule applied to it; the 'navigation' components are used exclusively for specificity.

I understand the first answer for the first example, but I dont quite follow what you mean on the second example, wouldn't the word ```two``` be the only one that would be green since we only target #two and not its children? — ghost2092000, Dec 16 '19 at 20:56

CSS > combinator not getting result I expected

2 Answers2