html - How to work with CSS Child Selector in a List? -
i tested following code, , don't know why same html structure not working in list. inside div
container p
works fine. p
inside .level1
class gets bold
. same structure inside ul
doesn't work. why li
element inside .level2
class bold
?
<ul class="level1"> <li>level 1</li> <li>level 1</li> <li>level 1 <ul class="level2"> <li>level 2</li> <li>level 2</li> </ul> </li> <li>level 1</li> </ul> <div class="level1"> <p>level 1</p> <p>level 1</p> <p>level 1 <div class="level2"> <p>level 2</p> <p>level 2</p> </div> </p> <p>level 1</p> </div> .level1 > li { font-weight: bold; } .level1 > p { font-weight: bold; }
<ul class="level1"> <li>level 1</li> <li>level 1</li> <li>level 1 // started here because of <ul class="level2"> // class2 ul elements considered li of class1 <li>level 2</li> <li>level 2</li> </ul> </li> <li>level 1</li> </ul>
whereas here, second question,
i add @defau1t answer :
in short, impossible toplace<div>
element inside<p>
in dom because opening<div>
tag automatically close<p>
element.
<div class="level1"> <p>level 1</p> <p>level 1</p> <p>level 1 //p tag can't have div tag inside it. <div class="level2"> //hence didn't worked <p>level 2</p> <p>level 2</p> </div> </p> <p>level 1</p> </div>
Comments
Post a Comment