ssnake ssnake - 5 months ago 13
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

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>