html - Understanding the CSS child selector > -
in tests, styles div > ul
rule applied div ul li ul
elements. why >
child selector not enforced?
i have solution this, want understand why need use solution.
in css, understand a b
select every element matches b
descendant of element matches a
. a
element can appear anywhere in hierarchy above b
element.
i thought understood a > b
select elements match b
if immediate child of element matches a
. a
element must direct parent of b
element.
however, in test below, style font-weight: bold;
applied ul
items, not immediate children of div
element. prevent style being applied, need first set conflicting style, color
property.
what logic in css makes work way does?
div ul { color: black; } div > ul { font-weight: bold; color: red }
<div> <ul> <li>red , bold 1</li> <li>red , bold 2</li> <li>red , bold 3 <ul> <li>black , bold 1</li> <li>black , bold 2</li> </ul> </li> <li>red , bold 4</li> </ul> </div>
this effect isn't result of child selector. seeing result of property inheritance.
the value of property in css defined 3 rules:
- if cascade (basically, boils down "what defined css files , browser") explicitly specifies value, use that.
- if property has inherited value , not in root of dom, use parent's value property.
- otherwise, use property's pre-defined initial value.
some properties, if value isn't defined in cascade, automatically assigned value of 'inherit'. nested ul
element, didn't define value font-weight
, , font-weight
one of properties defaults inherit
(notice "inheritance" entry in table @ top), use whatever parent element using (which you've defined bold).
your selector accurately selecting direct children, rule being inherited children's children because that's how particular property behaves. property not inherited default not affect children.
#parent { font-weight: bold; }
<span id="parent"> of text in here bold, <span id="child"> text in child. </span> </span>
Comments
Post a Comment