3

I have nested ul and li. I applied text-decoration: underline; for the ancestor li and this style is further carried to descendant li. In order to remove applied style from descendant li, I used another text-decoration: none !important; but It does not work. The selector I used is correct and if I change the text-colour, it works.

My question is: Why the text-decoration: none; is not working for nested li (frogs, toads...). I would appreciate the answer with explanation to understand the reason. 

ul li {
    text-decoration: underline;
}
ul li ul li {
    text-decoration: none !important;
    /* It is not working */
}
<ul>
  <li>Length: 15-20 inches</li>
  <li>Peak Breeding Activity: March-April</li>
  <li>Typical foods:
    <ul>
      <li>frogs</li>
      <li>toads</li>
      <li>salamanders</li>
      <li>earthworms</li>
      <li>minnows</li>
      <li>mice</li>
    </ul>
  </li>
</ul>
Maihan Nijat
  • 9,054
  • 11
  • 62
  • 110
  • Keep reading until the end of that [post](http://stackoverflow.com/questions/1823341/how-do-i-get-this-css-text-decoration-override-to-work), you'll find some workarounds. – Stickers Jan 28 '16 at 17:01
  • @Pangloss I read that post. I understand now that `text-decoration` is inherited to nested elements. But the suggested method doesn't work. I tried wrapping the nested elements in span but still no lack. The float works but I don't want inline it. – Maihan Nijat Jan 28 '16 at 17:09
  • I guess the simplest way would be using border-bottom instead. – Stickers Jan 28 '16 at 17:11
  • @Pangloss Thanks got it now. – Maihan Nijat Jan 28 '16 at 17:11

1 Answers1

0

ul > li will only style the direct children of your ul and ignore the nested li's. Use this css selector for items you do not want to be carried all the way through.

tayvano
  • 1,308
  • 1
  • 11
  • 18