× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Properties applying to children although using direct descendant selector ">"

Mar 24, 2015
<p>This is the normal behaviour it is called <strong>inheritance</strong>.<br> Some css properties are inherited from their parent whereas other aren't.</p> <h2>Inheritance</h2> <blockquote> <p>When no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element. Only the root element of the document gets the initial value given in the property's summary. [<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance" rel="nofollow">MDN</a>]</p> </blockquote> <h2>List of inherited properties</h2> <pre><code>azimuth border-collapse border-spacing caption-side color cursor direction elevation empty-cells font-family font-size font-style font-variant font-weight font letter-spacing line-height list-style-image list-style-position list-style-type list-style orphans pitch-range pitch quotes richness speak-header speak-numeral speak-punctuation speak speech-rate stress text-align text-indent text-transform visibility voice-family volume white-space widows word-spacing </code></pre> <p><em>Extracted from <a href="http://www.w3.org/TR/CSS21/propidx.html" rel="nofollow">w3.org</a> on 17/03/15</em></p> <hr> <h2>The <code>all</code> property</h2> <p>This property allows to control <em>CSS</em> inheritance with the <code>initial | inherit | unset</code> values :</p> <blockquote> <p>The CSS <em>all</em> shorthand property resets all properties, apart from unicode-bidi and direction, to their initial or inherited value. [<a href="https://developer.mozilla.org/en/docs/Web/CSS/all" rel="nofollow">MDN</a>]</p> </blockquote> <p>This property currently has the status of "Candidate Recommendation" but the <a href="https://developer.mozilla.org/en/docs/Web/CSS/all#Browser_compatibility" rel="nofollow">major modern borwsers</a> (except safari) have implemented it.</p> <hr> <h2>For your example case :</h2> <p>The <code>border</code> property doesn't inherit so the child elements won't have a border event though the parent does. </p> <p>But <code>font-size</code>, <code>color</code> and <code>text-transform</code> are properties that inherit to the child elements. Therefore the second level list item has the same <code>font-size</code>, <code>color</code> and <code>text-transform</code> as it's parent.</p> <p><strong>Conclusion :</strong><br> The selector you are using is correct and targets only the first level list items but some properties like <code>color</code> are inherited to the second level list items.</p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/29080860/Properties%20applying%20to%20children%20although%20using%20direct%20descendant%20selector%20%22&gt;%22/29081019">Stack Overflow</a>.</p>
comments powered by Disqus