Question

I have a plugin which outputs a profile section, and I plan to wrap it with an ol>li element. I want to style the list numbers using a different font size/style/color. But if I do that the font style will propagate/cascade into the profile. I don’t want to restyle every text inside the profile again. So is it possible to prevent the font style from propagating into the descendant elements?

<style>
#rank li{
  font-size:50px;
  font-style: italic;
  font-family: serif;
  font-weight: bold;
  width:70px;
  margin-right:10px;
  text-align:center;
}
</style>
<ol id="rank">
  <li>
    <div class="profile">
      <!-- contains complex stuffs including tables, floated div for displaying profiles-->
    </div>
  </li>
</ol>

EDIT:
Sorry, I over exaggerated about ‘restyling every text again’. I think if I need to make profile style unaffected again, I would need to know the default font styles outside the ul, and apply them in the div. It’s not much work, but in the future, one need to modify two places to keep the overall style consistent.

Answer 1

You could “reset” the font style on all child elements. It’s not actually resetting but it should work with the universal selector. But be carefull since this will actually enforce the font on all child elements, so if you selector is more specific than others it might in the end still affect other elements.

Check this fiddle for an example: http://jsfiddle.net/79ZK5/1/