0

the direct child selector in css(>) selects the direct descedants and passes color to them, but when it comes to text-decoration, it selects other elements too. How come?

http://codepen.io/anon/pen/dDJmE

for color i see it selects only the direct descedants, but why is not the behaviour for text-decoration correct? What am i missing?

CSS

li {
  text-decoration: none;
  color: black;
}
ol.numbers > li {
  text-decoration: underline;
  color: red;
}

HTML

  <ol class="numbers">
    <li> First! </li>
    <li> Second! 
       <ul>
        <li> hehe </li>
        <li> huhu 
          <ol>
            <li> nested! </li>
          </ol>
         </li>
      </ul>
    </li>
    <li> Third! </li>
    <li> Fourth! 
      <ol>
       <li> oh lala </li>
      </ol>
    </li>

   </ol>
mrtsherman
  • 39,342
  • 23
  • 87
  • 111
Vagelis Kostopoulos
  • 105
  • 4
  • 1
    A note that we ask you to include your code in your question as opposed to linking to it. That way if somebody else looks at this question and the linked code goes away, they can still deduce the solution. – mrtsherman Mar 02 '13 at 22:13
  • possible duplicate of [CSS text-decoration property cannot be overridden by child element](http://stackoverflow.com/questions/4481318/css-text-decoration-property-cannot-be-overridden-by-child-element) – Felix Kling Mar 02 '13 at 22:32
  • 1
    Just to make it clear: The problem is not with the selector, it's how `text-decoration` works. – Felix Kling Mar 02 '13 at 22:35
  • @Felix Kling: [This](http://stackoverflow.com/questions/1823341/how-do-i-get-this-css-text-decoration-override-to-work) is probably a closer duplicate. The one I answered directly addresses text decorations, whereas the other one, like this question, has the issue hidden behind an innocuous child selector problem. – BoltClock Mar 03 '13 at 06:34

2 Answers2

2

In your markup:

<div>

  <ol class="numbers">
    <li> First! </li>
    <li> Second! 
       <ul>
        <li> hehe </li>
        <li> huhu 
          <ol>
            <li> nested! </li>
          </ol>
         </li>
      </ul>
    </li>
    <li> Third! </li>
    <li> Fourth! 
      <ol>
       <li> oh lala </li>
      </ol>
    </li>

   </ol>

  <ol class="letters">
    <li> A </li>
    <li> B </li>
  </ol>

The (non-specific) ol and respective li children are simply subjects of styles being applied to any text content within any ol.numbers>li. You have to override the styling the non-specified child ol and lis are inheriting. You can do this with ol.numbers>li li as a selector.

Addition

Seems I was right about text-decoration not being congruent with other text-styling mechanisms: How do I get this CSS text-decoration override to work?

You're going to have to approach this problem differently. I would recommend wrapping your text with appropriate tags (ps, spans, etc.), and addressing them specifically in the CSS to get the desired outcome.

Community
  • 1
  • 1
dclowd9901
  • 6,756
  • 9
  • 44
  • 63
  • 1
    No, I don't think this would work. The OP is already specifying `text-decoration: none` for all `li` elements. Proof: http://jsfiddle.net/Rqkx2/1/. – Felix Kling Mar 02 '13 at 22:26
  • You're right; I'll keep working on it. It seems as though `text-decoration` in particular is a bit quirky in how it handles being overridden (for instance, the text color *does* change to black, expectedly). – dclowd9901 Mar 02 '13 at 22:29
  • 1
    It's a duplicate question, more info here: http://stackoverflow.com/questions/4481318/css-text-decoration-property-cannot-be-overridden-by-child-element/4481356#4481356. – Felix Kling Mar 02 '13 at 22:33
  • 1
    Felix-kling it seems you are right. I never thought text-decoration would be special, so when searching for possible solutions before writing the question, it didn't dawn on me to search specifically for this text-decoration. thank you Felix Kling – Vagelis Kostopoulos Mar 02 '13 at 22:43
1

It is due to the order that CSS applies styles. ol.numbers > li is more specific than li. So that style takes precedence.

mrtsherman
  • 39,342
  • 23
  • 87
  • 111
  • Yeah, that's right. One should search for `'CSS specifity'` in the search engine if your choice. – yunzen Mar 02 '13 at 22:14
  • This answer doesn't make any sense. CSS shouldn't be giving any other descendants *besides* the direct descendants of `ol.numbers` that underline characteristic, ergo traditional cascading rules are irrelevant. – dclowd9901 Mar 02 '13 at 22:14
  • @dclowd9901 - yes, this seems to be a bug? – mrtsherman Mar 02 '13 at 22:16
  • ol.numbers > li should select only the li elements that are direct children of ol.numbers. But here this is not happening. this was the question :) – Vagelis Kostopoulos Mar 02 '13 at 22:16
  • @Vagelis: It *is* happening. If it wasn't the color of the underline would be black. – Felix Kling Mar 02 '13 at 22:18
  • 1
    No wait. OK, got it: Because the styling is being applied to the parent LI, any content of that LI is going to receive the style, regardless of what it's being contained by. OLs, ULs, spans, p's whatever. It's a style applied to the content of `ol.numbers>li`. You have to override that style with specificity on the children. – dclowd9901 Mar 02 '13 at 22:18
  • @dclowd9901 - That makes sense. This answer is wrong, but I'm going to leave it up just because the discussion is worthwhile. You should post your own answer. – mrtsherman Mar 02 '13 at 22:21
  • so why is 1.hehe and 2.huhu underlined? they are not direct descedants of ol.numbers – Vagelis Kostopoulos Mar 02 '13 at 22:21
  • @mrtsherman: I wouldn't even say you were wrong, just that the way the styling is being applied has more to do with the markup hierarchy than specificity, though specificity is the solution to the problem. – dclowd9901 Mar 02 '13 at 22:23
  • 1
    It has nothing to do with the selector. More info in this question: http://stackoverflow.com/questions/4481318/css-text-decoration-property-cannot-be-overridden-by-child-element/4481356#4481356. – Felix Kling Mar 02 '13 at 22:35