Best Bite project: nth-child pseudo class for lists

[rubyslayer18600]

In the best bite project addressing nth-child pseudo class selector, I first applied the rules to ul but found it not taking an effect. After directly applying it to li, the rules work. Here is a code snippet example:

.breakfast li:nth-child(2n + 3) {
  color: goldenrod;
  font-weight: bold;
}

The corresponding html looks like this:

        <div class="meal breakfast">
          <h4>Breakfast</h4>
          <ul>
            <li>Eggs with Pepperjack, Jalepeno, and Sushito </li>
            <li>Kale Burger with Arugala Salad</li>
            <li>Buckwheat Banana Waffles with Cinnamon Cream</li>
            <li>Maple French Toast</li>
            <li>Rolled Oats with Berries</li>
            <li>Light & Fluffy Lemon Pancakes</li>
            <li>Spiced Mole Enchiladas</li>
            <li>Millet Grits & Eggs</li>
            <li>Portabella Omlette with Quinoa Cakes</li>
            <li>Chocolate Croissant with Sweet Potato Crisps</li>
            <li>Nutmeg Dusted Beignets with Market Coffee</li>
          </ul>
        </div>

The expected effect is shown here:

But why is this the case? Shouldn’t child rules be applied to its parent? Or maybe ul shouldn’t be viewed as a parent container?

[mtf]

Projects: BestBite

UL is the parent container. The LI’s are descendants of .breakfast. The rule applies to any LI that is the nth-child according to the selection expression…

[rubyslayer18600]

Oh I see. I was expecting CSS to figure out what children to apply the nth-child rules on without explicit selection of the children’s tags… I think my understanding is still a bit foggy here but will experiment more. Thanks!!

[mtf]

I was expecting CSS to figure out what children to apply the nth-child rules on

CSS doesn’t actually figure anything out. We do, and declare it as a rule that CSS attempts to follow.

[rubyslayer18600]

Haha, spot on~ Thanks! Will keep it in mind