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?