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

Popular posts from this blog

Delphi change the assembly code of a running process -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

C++ 11 "class" keyword -