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?

This seems illogical. I'd love to know the reason if somebody has the specifics. — Turnip, Jul 16 '18 at 10:48
@Turnip **Looks like it's really not possible:** * [Problem with text-decoration in cascaded `
I take back my previous comment. It does make sense when use a different example: http://jsfiddle.net/3rror404/ntLgkmap/1/ — Turnip, Jul 16 '18 at 10:53
@Turnip for the last one it's logical, as the span is inline and will get the style of underline (this is a known behavior) make it inline-block and it will change — Temani Afif, Jul 16 '18 at 10:53
@Turnip check the second example of my answer, inline-block will cancel the effect — Temani Afif, Jul 16 '18 at 10:59

score 5 · Answer 1 · answered Jul 16 '18 at 11:01

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>

score 2 · Answer 2 · answered Jul 16 '18 at 10:46

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. :(

answered Jul 16 '18 at 10:46

Praveen Kumar Purushothaman

164,888
24
203
252

Haha that's exactly what I have come to just a minute before :) My workaround is even simpler - I use `` instead of ``. However it makes the code dirtier and doesn't look absolutely accurate because the `1.` is still not underlined. If there won't be better answers I will mark this as a solution. – Stalinko Jul 16 '18 at 10:48
@Stalinko **Looks like it's really not possible:** * [Problem with text-decoration in cascaded `
`](http://p2p.wrox.com/css-cascading-style-sheets/23540-problem-text-decoration-cascaded-li.html) * https://stackoverflow.com/questions/1823341

Praveen Kumar Purushothaman

Jul 16 '18 at 10:48

@Stalinko No ``, as it's deprecated. `:(` – Praveen Kumar Purushothaman Jul 16 '18 at 10:49

w3c says it was deprecated in html4 but then redefined in html5: https://www.w3schools.com/tags/tag_u.asp Also it is properly supported in all the browsers. – Stalinko Jul 16 '18 at 10:54

@Stalinko w3schools (the poor tutorial site) is *not* the same as the World Wide Web Consortium. The difference is quite important. If you need a reference, better to avoid w3schools, use something more trustworthy like MDN instead. – CertainPerformance Jul 17 '18 at 07:52

Temani Afif · Answer 3 · 2018-07-16T11:02:45.527

2

You can redefine text-decoration with the same color as background:

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

.top ol li{
  text-decoration: underline;
  text-decoration-color: #fff;
}

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

Or make some changes to the behavior of elements:

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

.top ol{
  display:inline-block;
  width:100%;
  box-sizing:border-box;
}

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

edited Jul 16 '18 at 11:02

answered Jul 16 '18 at 10:51

Temani Afif

245,468
26
309
415

That's a nice hack. I did try this, but it didn't work out for me. `:(` – Praveen Kumar Purushothaman Jul 16 '18 at 10:57
@PraveenKumarPurushothaman I added another one, you can try it also – Temani Afif Jul 16 '18 at 10:59
Woah... That works too. But problem is with the `margins`. Use `padding` and `border-box`, that will be awesome. – Praveen Kumar Purushothaman Jul 16 '18 at 11:00
We both fixed. LoL. – Praveen Kumar Purushothaman Jul 16 '18 at 11:01

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

3 Answers3