CODEWITHSUNDEEP
csshtmlhtml-listsnested-lists
Stalinko
Stalinko

Reputation: 3646

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

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?

Upvotes: 4

Views: 784

Answers (3)

Temani Afif
Temani Afif

Reputation: 272789

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>

Upvotes: 2

Girisha C
Girisha C

Reputation: 1950

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>

Upvotes: 5

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

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

Upvotes: 2

Related Questions