CODEWITHSUNDEEP
csscss-selectorsselector
MonuMan5
MonuMan5

Reputation: 373

Difference between Child and Descendant Combinator Selectors

I've been trying to practice using the child combinator selector and seem to be having some mixed results.

I set up the following sample html:

<div class="One">
    One Text
    <div class="Two">
        Two Text
        <div class="Three">
            Three Text
            <div class="Four">
                 THE BASE IS HERE.  
            </div>
        </div>
    </div>
</div>

Then I tried to do the following. 

div.One > div.Two {
    color: blue;
}

My results were the same as if I had just used a descendant selector. Although, when I tried using the child combinator with ordered list inside of a unordered list, it seemed to work just as I would expect.

What's going on here?

Below is an example of how I would expect it to behave.

Sample HTML:

<ul class="Parent">
<li>One</li>
<li>Two</li>
    <ol class="Child">
        <li>One One</li>
        <li>Two Two</li>
    </ol>
<li>Three</li>

and using this selector: 

ul.Parent > li {
color: blue;
}

This second example ONLY selects the child as I would expect it to behave. But when using the nested divs... it goes always down the chain to the grand children.

So my question is, why does it only select the child in the second example and not in the first?

Upvotes: 1

Views: 4488

Answers (3)

Kanish
Kanish

Reputation: 321

Child combinator = only apply css to all immediate child. Descendant combinator = apply css to all nested child

#container__descendant  .box {
    padding-bottom: 15px;
    background-color: skyblue;
    border: 1px solid red;
}


#container__child > .box {
    padding-bottom: 15px;
    background-color: lightgreen;
    border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<h5>Descendant Combinator</h5>
<div id="container__descendant">
    <div class="box">Immediate .BOX</div>
    <div class="box-2">Immediate .BOX-2</div>
  <div>
    <div class="box">Nested .BOX</div>
  </div>
</div>
<hr />
<h5>Child Combinator</h5>
<div id="container__child">
    <div class="box">Immediate .BOX</div>
    <div class="box-2">Immediate .BOX-2</div>
  <div>
    <div class="box">Nested .BOX</div>
  </div>
  <div class="box">Immediate .BOX</div>
</div>
<div class=”box”>Nearby .BOX</div>
</body>
</html>

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371221

The child combinator selector (>) targets an element that is a child of its parent. It does not target descendants beyond the children.

The descendant selector targets the child and other descendants of the parent/ancestor.

Both selectors target child-level elements, so in those cases there won't appear to be any difference between them.

See a list of selectors with definitions here: http://www.w3.org/TR/css3-selectors/#selectors

Upvotes: 4

BoltClock
BoltClock

Reputation: 723598

In your first example, there is only one .One element and only one .Two element, and that .Two is a child of that .One. So whether you use the child or descendant combinator isn't going to make any difference — both selectors are going to match just that lone .Two element. Any E > F pair is necessarily also an E F pair; the former is a proper subset of the latter.

Your second example is flawed for two reasons:

  • If you want to compare the child and descendant combinators, avoid using color — as others have mentioned it's inherited which can confuse you. (This applies to both examples.)

  • The only reason it's not actually being inherited by the inner ol is because you're not correctly nesting it within one of the outer li elements.

However, it nevertheless demonstrates why the child combinator works as advertised: because the inner li elements are not children of the outer ul. They are children of the inner ol.

Upvotes: 3

Related Questions