CODEWITHSUNDEEP
csscss-cascade
Student
Student

Reputation: 28365

Why direct child selector is propagating?

On the snippet, the 3rd h2 should not be affected by the css, so why it is?

.a > div { color: blue; text-align: center; }
<div class="a">
    <h2>Title</h2>
    <div>
        <h2>this shoud be center and blue</h2>
        <div>
            <h2>this should Not be center or blue</h2>
        </div>
    </div>
</div>

Upvotes: 2

Views: 190

Answers (2)

The Process
The Process

Reputation: 5953

It is not propagating, the children of the .a>div are inheriting styles from their parent, since they don't have color and text-align set.

enter image description here

.a > div {
  color: blue;
  text-align: center;
}
div {
  color: black;
  text-align: left;
}
<div class="a">

  <h2>London 1</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

  <div class="">


    <h2>this shoud be center and blue</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>

    <div class="">
      <h2>this should Not be center or blue</h2>
      <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    </div>


  </div>



</div>

Upvotes: 2

Oriol
Oriol

Reputation: 288570

That's because some CSS properties are inheritable:

Inheritance propagates property values from parent elements to their children. The inherited value of a property on an element is the computed value of the property on the element’s parent element. [...]

Some properties are inherited properties, as defined in their property definition table. This means that, unless the cascade results in a value, the value will be determined by inheritance.

In this case, both color and text-align are inheritable. If you don't want that element to inherit those properties, you can provide some value in the cascading. For example, you can set these properties to their initial value, via the initial keyword:

.a div { /* Set initial values to all descendants */
  color: initial;
  text-align: initial;
}
.a > div { /* Set desired values to children */
  color: blue;
  text-align: center;
}
<div class="a">
  <h2>Title</h2>
  <div>
    <h2>this shoud be center and blue</h2>
    <div>
      <h2>this should Not be center or blue</h2>
    </div>
  </div>
</div>

Upvotes: 4

Related Questions