How to work with CSS Child Selector in a List?

Question

I tested the following code, and don't know why the same HTML Structure is not working in a list. Inside the div container with the p everything works fine. Only the p inside .level1 class gets bold. But same structure inside a ul doesn't work. Why is also the li element inside the .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;
}

score 0 · Answer 1 · edited May 23 '17 at 11:50

<ul class="level1">
  <li>Level 1</li>
  <li>Level 1</li>
  <li>Level 1               // Started here because of this 
    <ul class="level2">     // class2 ul elements are considered as li of class1
      <li>Level 2</li>
      <li>Level 2</li>
      </ul>
  </li>                   
  <li>Level 1</li>
</ul>

whereas here, your second question,

I would like to add @defau1t answer :
In short, it is impossible toplace a <div> element inside a <p> in the DOM because the opening <div> tag will automatically close the <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 it didn't worked
      <p>Level 2</p>
      <p>Level 2</p>
    </div>
  </p>
  <p>Level 1</p>
</div>

score 0 · Answer 2 · answered Aug 11 '13 at 00:51

0

With your code you are tageting all the li's tags from the ul with the class .level1 including the li's of the ul .level2, to fix this just re-target the li's of the .level2 ul and return the font-weight : 400 //or normal, see this:
http://jsfiddle.net/rsm23/s3CmF/

Hope I helped You

answered Aug 11 '13 at 00:51

Saif Lacrimosa

35
9

He's actually not selecting wrong. The `.level1 > li` selects all `li` elements with a parent (a direct parent) with a class `level1`. – Apr 07 '15 at 10:46

score 0 · Answer 3 · edited May 23 '17 at 12:13

Your example with <div> elements inside <p> elements is invalid, as discussed here. W3C also specifies here:

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

Since <div> elements are block-level elements, you can't place them inside <p> elements. So... never do that again.

On to your problem. Your example with <li> items works perfect according to the specifications. Your selector .level1 > li selects the li elements correctly, however, the <li>Level 2</li> elements simply inherit the font-weight property. You would have to add a css rule

.level2 > li {
    font-weight:initial;
}

or set it to another value, if you want to.

How to work with CSS Child Selector in a List?

3 Answers3