How to underline only top-items in a nested list?

Question

Consider the following code:

<ol class=top>
  <li>Top item

    <ol>
      <li>Sub</li>
      <li>list</li>
      <li>item.</li>
    </ol>
  </li>
</ol>

And css:

.top > li {
  text-decoration: underline;
}

.top ol li {
  text-decoration: none;
}

Fiddle: http://jsfiddle.net/fLvns1z0/1/

I want only the "Top item" be underlined, but instead whole text is underlined. Even !important doesn't help. Any ideas how to make it work and keep the code as simple as possible?

Answer 1

If you don't want to add an extra span or any other element to achieve the result as said by others, you can use css :first-line sudo class, check the working example below:

.top > li:first-line {
  text-decoration: underline;
}

<ol class="top">
  <li>Top item
    <ol>
      <li>Sub</li>
      <li>list</li>
      <li>item.</li>
    </ol>
  </li>
</ol>

Answer 2

It looks like it's because of the behaviour of <li> tag. If possible, please add a <span> and it should be fine:

.top span {
  text-decoration: underline;
}

<ol class=top>
  <li><span>Top item</span>
    <ol>
      <li>Sub</li>
      <li>list</li>
      <li>item.</li>
    </ol>
  </li>
</ol>

Also, when you add a <span> tag, you are clearly giving a separation. Plus the real reason is I am unable to fix the other way. Sorry about that. :(