CODEWITHSUNDEEP
csslistselectorchildren
Richard Mišenčík
Richard Mišenčík

Reputation: 324

Not working CSS selector

My head is about to explode on this one. Check this fiddle please:

http://jsfiddle.net/337C7/1/

section ul li {
    text-decoration: underline;
}

section ul li ul li {
    text-decoration: none !important;
}

Basically I have unordered list and inside that another one. Im just trying to remove the text-decoration on the children ul. For whatever reason it doesnt want to work.. Am I stupid?

Upvotes: 5

Views: 110

Answers (7)

BenM
BenM

Reputation: 53198

While the browser might render it without an issue, certain browsers will render the text-decoration, and get confused by the containing element (in this case, the <li>. This fact is proven by @Matthew Rapati's comment). For example, this is from the MDN article on the issue (borrowed from j08691's answer for completeness):

Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors.

For example, in the markup: <p>This text has <em>some emphasized words</em> in it.</p> the style rule: p { text-decoration: underline } would cause the entire paragraph to be underlined. However, the style rule: em { text-decoration: none } would not cause any change; the entire paragraph would still be underlined. (However, the rule em { text-decoration: overline } would cause a second decoration to appear on "some emphasized words".)

You should simply place the child <ul> as a sibling, rather than child of the <li>, for example:

<ul>
    <li>bla</li>
    <li>bla bla </li>
    <ul>
        <li>bla bla bla</li>
        <li>bla bla bla bla </li>
        <li>bla bla bla bla bla</li>
        <li>bla bla bla bla bla bla</li>
    </ul>
</ul>

You should then update your selector as follows:

section ul ul li {
    text-decoration: none !important;
}

You can see a working jsFiddle Demo

Upvotes: 2

Wayne Smith
Wayne Smith

Reputation: 4868

section ul li /* descendants including direct children */ {
    text-decoration: underline;
}

section>ul>li /* children */ {
    text-decoration: none;
}

use children selector for the children after you style the descendants. I'm not sure if you wanted the children to be decorated or the descendants of the children so my rules may be reversed. But the children selector goes after the descendants and then should not require an !important rule.

Update per your fiddle

col-md-12 col-sm-12 >ul>li /* children */ {
        text-decoration: none;
    }

or 

section>div>div>div>ul>li /* children */ {
    text-decoration: none;
}

Upvotes: 0

davidpauljunior
davidpauljunior

Reputation: 8338

You could use a border instead of text-decoration. You'll need to float and clear as <li> is block level. This way you don't have to change any HTML.

section ul li {
  border-bottom: 1px solid #000;
  float: left;
  clear: both;
} 

section ul ul li {
  border: none; 
}

http://jsfiddle.net/337C7/33/

Upvotes: 0

Ani
Ani

Reputation: 4523

Try this: http://jsfiddle.net/337C7/30/

HTML:

                  <ul>
                        <li>bla</li>
                        <li>bla bla </li>
                            <ul>
                                <li>bla bla bla</li>
                                <li>bla bla bla bla </li>
                                <li>bla bla bla bla bla</li>
                                <li>bla bla bla bla bla bla</li>
                            </ul>
                      </ul>

CSS

section ul ul li {
    text-decoration: none !important;
}

Upvotes: 0

brouxhaha
brouxhaha

Reputation: 4093

Add a span element around the text inside the first set of li elements. Then change the css so you target the span instead of the li. If you add a class to the li elements, your css will be easier to read.

http://jsfiddle.net/337C7/27/

html:

<ul class="first">
                        <li class="first-item"><span>bla</span></li>
                        <li class="first-item"><span>bla bla </span>
                            <ul class="second">
                                <li>bla bla bla</li>
                                <li>bla bla bla bla </li>
                                <li>bla bla bla bla bla</li>
                                <li>bla bla bla bla bla bla</li>
                            </ul>
                        </li>
                    </ul>

css:

.first-item > span{text-decoration: underline;}

Upvotes: 0

j08691
j08691

Reputation: 207901

According to MDN:

Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors.

For example, in the markup: <p>This text has <em>some emphasized words</em> in it.</p> the style rule:p { text-decoration: underline } would cause the entire paragraph to be underlined. However, the style rule: em { text-decoration: none } would not cause any change; the entire paragraph would still be underlined. (However, the rule em { text-decoration: overline } would cause a second decoration to appear on "some emphasized words".)

Upvotes: 4

moraga86
moraga86

Reputation: 61

The text-decoration none is working. But the the unclosed li above is affecting the li bellow.

Upvotes: 0

Related Questions