CSS Inheritance Blocking: A Quick Refresher

Just a quick note on CSS inheritance behavior that bit me again this week. Posting here as a reminder for myself and anyone else who occasionally gets tripped up by these edge cases.

The Issue

When direct element selectors in global styles block inheritance:

<il style="font-weight: 700;">
  <div>
    <span>A Child</span>
    <!-- Not inheriting the bold -->
  </div>
</il>

With this common global reset pattern: The global div selector naturally takes precedence over inheritance from the parent il element.

Solution

Rather than touching globals (and unleashing chaos), just target the specific chain:

il div,
il div span {
  font-weight: 700;
}

This approach ensures your styles reach their intended targets without disrupting other elements. Remember: !important only boosts individual declarations, not inheritance paths.