Best Bite project: nth-child pseudo class for lists

Projects
1

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:

image
image752Ă—736 69.2 KB

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?

2

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…

3

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…:sweat_smile: I think my understanding is still a bit foggy here but will experiment more. Thanks!! :slight_smile:

1 Like
4

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

1 Like
5

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

1 Like
6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.