ssnake ssnake - 1 year ago 42
CSS Question

How to set bold only to first level list elements?

How to set bold style with CSS only to the "titles" in this code?

Live example: jsbin.com/xofudovoda/



.container > ol {
font-weight: bold;
}

<div class="container">
<ol type="I">
<li>
Title 1
<ol>
<li>sub 1</li>
<li>sub 2</li>
</ol>
</li>
<li>
Title 2
<ol>
<li>sub 1</li>
<li>sub 2</li>
</ol>
</li>
</ol>
</div>




Answer Source

You can set bold on first level <ol>, and reset it on the second level <ol>s.

.container ol {
  font-weight: bold;
}
.container ol ol {
  font-weight: normal;
}
<div class="container">
  <ol type="I">
    <li>
      Title 1
      <ol>
        <li>sub 1</li>
        <li>sub 2</li>
      </ol>
    </li>
    <li>
      Title 2
      <ol>
        <li>sub 1</li>
        <li>sub 2</li>
      </ol>
    </li>
  </ol>
</div>