Why Isn't the CSS for a LI in a UL Overriding the CSS for the UL? 3

WingedKnight · Feb 17, 2012

I'm trying to apply formatting to a list header which should not apply to the list items. I have this CSS:

Code:

ul { text-decoration: underline; }
ul li { text-decoration: none; }

and this HTML:

Code:

<ul>Should be underlined
	<li>Should not be underlined</li>
</ul>

How do I fix the CSS so that the second line isn't underlined?

vacunita · Feb 17, 2012

Having anything other than li elements inside an unordered list is invalid code, and thus there's no real logical reason why you would apply something to a Ul you did not want applied to the li's inside it.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

WingedKnight · Feb 17, 2012

To clarify, if you test the following out in the major browsers:

Code:

ul { font-size: 24pt; text-decoration: underline; }
ul li { font-size: 12pt; text-decoration: none; }

Code:

<ul>Foo
	<li>Bar</li>
</ul>

you'll find that "Foo" is rendered at 24 pt and "Bar" is rendered at 12 pt, but strangely, both are underlined. Given that the font-size attribute of the "ul li" overrides the font-size attribute of the "ul", why isn't the same thing happening for the text-decoration attribute?

vacunita · Feb 18, 2012

why isn't the same thing happening for the text-decoration attribute?

It is actually. However the underline you see does not belong to the li, it belongs to the ul. And as such cannot be affected by the li's stylings.

text-decoration is a special property that unlike other properties goes through the element disregarding any child elements within and underlining it. Its not technically being inherited, its being applied in a strange way to the parent through all children.

Take these examples for instance:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head><title>List</title>
<style type="text/css">
ul{
text-decoration:underline;
border:1px solid blue;
color:red;
}

ul li {
text-decoration:none;
color:#686868;
}

div.mydiv{
color:red;
text-decoration:underline;
}

div.mydiv span.notunder{
text-decoration:none;
color:blue;
}
</style>
</head>
<body>
<ul>
<li><span>Item One</span></li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ul>


<div class="mydiv">
	
	<p>
		<span class="notunder">Some Text that should not <br> be underlined but still will be</span>
		<br>
		<span>Underlined Text</span>
	</p>
</div>
</body>
</html>

Notice how in both cases the underline cannot be removed and in both its displayed in red as specified in the parent's color property.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

WingedKnight · Feb 19, 2012

Thank you (and starred) for the detailed explanation!

vacunita · Feb 20, 2012

No prob, glad I could help

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Why Isn't the CSS for a LI in a UL Overriding the CSS for the UL? 3

WingedKnight

Programmer

vacunita

Programmer

WingedKnight

Programmer

vacunita

Programmer

WingedKnight

Programmer

vacunita

Programmer

Similar threads

Part and Inventory Search

Sponsor