html - child combinator and span -
html - child combinator and span -
i have style !
div > .action{ color: blue; }
and code
<div> <p class="action"> hey, first action paragraph. <span> span within action</span> <h3>not direct child, not div, h3 block</h3> <div>not direct kid div</div> <span> span within action, , after closing block</span> </p> </div>
as result, first span blue, when h3, div , next span black. (tested on chrome, ie , ff)
is there inline/block hidden rule ?
edit : i've set illegal elements within paragraph. changing p
div
makes blue. thought don't expect that, think should work specs before returning there.
by html syntax rules, p
element cannot contain h3
element. rule enforced browsers: when encounter <h3>
tag while p
element open, implicitly close p
element. (this implies </p>
tag later invalid , ignored.) thus, p
element contains text image shows blue.
if prepare markup e.g. replacing p
element div
element, things change:
class="snippet-code-css lang-css prettyprint-override"> div > .action{ color: blue;
class="snippet-code-html lang-html prettyprint-override"> <div> <div class="action"> hey, first action paragraph. <span> span within action</span> <h3>not direct child, not div, h3 block</h3> <div>not direct kid div</div> <span> span within action, , after closing block</span> </div> </div>
all of text within div
class="action"
becomes blue, unless other style sheets intervene. reason that descendant elements inherit text color.
html css
Comments
Post a Comment