CSS: Inheritance 2

sonnysavage · Oct 27, 2003

I've got some CSS that looks like this:

Code:

ul.style li { border: 2px solid #000; }
li.one { border-bottom: none; }
li.two { }
li.three { }

The problem I'm experiencing is why the "

Code:

li.one

" class does NOT override the "

Code:

ul.style li

" declaration. Can anyone shed some light on this? [pc2]

Vragabond · Oct 27, 2003

Try this:

Code:

ul.style li { border: 2px solid #000; }
.style li.one { border-bottom: none; }
li.two { }
li.three { }

Hope this helps.

sonnysavage · Oct 27, 2003

Rock on... a star for you! [thumbsup]

Thanks!

clarkin · Oct 27, 2003

Great CSS reference/tut:

http://www.brainjar.com/css/using/

Since IE still doesn't support a lot of CSS the following is probably no use to you, but worth considering for the future (in Firebird the first <li> doesn't get a bottom border):

Code:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd&quot;>[/URL]
<html>
<head>
<title>Test Bed</title>
<style type=&quot;text/css&quot;>
ul.style li { border: 2px solid #000; }
ul.style li:first-child { border-bottom: none; }
</style>
<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
</script>
</head>
<body>
Unordered List:
<ul class=&quot;style&quot;>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ul>
</body>
</html>

Posting code? Wrap it with code tags: [ignore]

Code:

[/ignore][code]CodeHere

[ignore][/code][/ignore].

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!

CSS: Inheritance 2

sonnysavage

Programmer

Vragabond

Programmer

sonnysavage

Programmer

clarkin

Programmer

Similar threads

Part and Inventory Search

Sponsor