Alex Rivera | Logout

How do I get this CSS text-decoration override to work?

Asked 2009-12-01T00:38:43.223
40

Some days I swear I'm going mad. This is one of those days. I thought my CSS was fairly straight-forward here, but it just doesn't seem to be working. What am I missing?

My CSS looks like this:

ul > li {
    text-decoration: none;
}
ul > li.u {
    text-decoration: underline;
}
ul > li > ul > li {
    text-decoration: none;
}
ul > li > ul > li.u {
    text-decoration: underline;
}

And my HTML looks like this:

<ul>
  <li>Should not be underlined</li>
  <li class="u">Should be underlined
    <ul>
      <li>Should not be underlined</li>
      <li class="u">Should be underlined</li>
    </ul>
  </li>
</ul>

Yet it comes up like this:

Image

html css text-decorations
Edit
Report

2 Answers

2

The reason you´re seeing what you're seeing is that your rule

ul > li.u

takes preference over:

ul > li > ul > li

as a class is specified and that has more weight than the element selectors together.

Edit: What you could try is:

.u ul {
        text-decoration: none;
}
.u {
        text-decoration: underline;
}

and play around with that (perhaps you will have to use li.u instead of just .u).

However, depending on the content you might want to wrap the underlined parts in q, em or strong tags and style these tags instead of using a class. That way you would be describing your content as well as styling it.

answered 2009-12-01T00:49:16.350
2

o.k.w.'s answer above explains perfectly why you can't do what you are asking without some other changes. No, you're not going mad!

Possible workarounds:

  • try border-bottom?
  • wrap the text you want underlined in a span class="u" tag? (to prevent the text-decoration from decorating nested elements)
  • if you aren't able to change the markup, you could add some scripting to accomplish the same as my previous suggestion.

Best of luck!

answered 2009-12-01T05:26:47.463

Your Answer