views:

151

answers:

4

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

A: 
.u {text-decoration: underline;}
James
Doesn't work, since the child list will have all its elements underlined. See http://jsbin.com/iweri to see how this would look.
Vegard Larsen
See Andrews code it's backwards of mine and it works. Weird that mine does not :)
James
+2  A: 

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.

jeroen
This is correct, the most specific rule in css will have the most weight in the cascading appliance of those rules, #id is most specific, then .class, then element selectors.
Colin
I saw a list somewhere once with the exact values to calculate the weight of a rule. Can´t find it now though...
jeroen
I understand, but fundamentally my question is how I go about overriding that underline property that's being inherited and setting it back to none, as it seems to be ignoring that currently, even if I add !important to the more specific none rule.
SoaperGEM
+7  A: 

text-decoration does not behave the same as other font/text related styling like font-weight. Applying text-decoration will affect all nested elements as well.

Check this out: http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration

Excerpt:

Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence. The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the element
. . . .
Some user agents have implemented text-decoration by propagating the decoration to the descendant elements as opposed to simply drawing the decoration through the elements as described above. This was arguably allowed by the looser wording in CSS2.

I've got the info from: http://csscreator.com/node/14951

o.k.w
So essentially it can't be done; instead I'll have to make sure never to set that property on a parent li, and instead include a <span> there or somesuch. It seems like a stupid and arbitrary rule to include in the CSS spec; it's so counter-intuitive.
SoaperGEM
Sadly speaking, that is true. To be honest, if not for your question, I wouldn't have found that out as well :P
o.k.w
+1  A: 

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!

Funka
I often simplify/modify the examples that I give in questions to make my explanation as clear as possible. In reality, I'll actually be dealing with text-decoration: line-through, and none of the border properties really line up with that. It looks like either extra span tags or JavaScript is the solution. Both seem so inelegant though; this seems like this is a "bug" in the CSS spec more than anything.
SoaperGEM